List
A semantic list component for displaying ordered and unordered lists with consistent styling
Overview
The List component provides a semantic way to display ordered and unordered lists with consistent styling from the Integral design system. It supports both bulleted (unordered) and numbered (ordered) list types. The List component must be used with ListItem child components to create properly structured list content.
Only single level of nesting is currently supported. Multi-level nesting will be extended at a future date if needed.
Use the List component when you need to display:
- Sequential or hierarchical information
- Step-by-step instructions
- Feature lists or checklists
- Navigation menus (when semantically appropriate)
- Any content that benefits from list formatting
Examples
Basic Usage
The List component supports both unordered (bulleted) and ordered (numbered) list types. Each list item must be wrapped in a ListItem child component, which can contain any React content including text, links, or other components.
Unordered List
An unordered list displays items with bullet points. The ListItem child components can contain formatted content, links, or other React components.
- Origin exclusive dividend average irrational.
- Divisor tree scientific outcome perpendicular.
Diagram scalene polygon horizontal. Collinear arc operation.
Ordered List
An ordered list displays items with numbers, useful for sequential steps or ranked information. Each ListItem child component represents one item in the sequence.
- Midpoint probability mean additive combination.
- Midpoint factor parallelogram absolute plane.
- Mutually arc coplanar diagram interpolation.
- Root ellipse congruent property statistics.
Import
import { List, ListItem } from '@im/integral/components/styled';Props
List Props
Prop
Type
ListItem Props
Prop
Type