data contract

List

Vertical list of items. Lighter than Table — no columns.

Variants

  • default
  • separated
  • cards

Sizes

  • sm
  • md
  • lg

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.

Get the List contract in your project.