data contract
List
Vertical list of items. Lighter than Table — no columns.
Variants
- default
- No separators
- separated
- Hairline divider between items
- cards
- Each item is a Card
Sizes
- sm
- 40pt rows
- md
- 56pt rows
- lg
- 72pt rows
Example
<List variant="separated">{items.map((i) => <ListItem key={i.id}>{i}</ListItem>)}</List>Usage rule
Use semantic <ul> + <li>; never <div role="list">.
The full List contract has 4 more rules, plus the do-not patterns. Get the full recipe.