List
Hairline-separated rows with keyboard navigation between interactive items.
<mm-list aria-label="Recent runs">
<mm-list-item href="/runs/8121" secondary="Triggered by schedule · 1,284,019 rows">
<mm-provider-logo slot="start" provider="postgresql" decorative></mm-provider-logo>
postgres-shop
<mm-status-pill slot="end" state="succeeded"></mm-status-pill>
</mm-list-item>
</mm-list>
Guidance
A list of records separated by hairlines: the body of a Needs attention or Pipelines panel, a
run history, the members of a team. Rows are --mm-row tall (40px, 36px in compact density or
with dense) and grow for a secondary line. Use a table when people need to compare columns.
When items are interactive (href or interactive), the list is one tab stop. Up and Down move
between interactive items, Home and End jump to the first and last, and Tab leaves the list.
Nothing is selected by moving: Enter follows the link or activates the item. This is listbox-like
navigation without selection, so the items stay links and buttons to assistive technology.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
dense | dense | boolean | false | 36px rows regardless of density. |
Slots
| Slot | Description |
|---|---|
| Default | mm-list-item elements. |
CSS custom properties
| Property | Description |
|---|---|
--mm-list-inset | Inline padding of rows. Defaults to space-4, to line up with a panel head. |
--mm-list-lead-size | Smallest inline size of every item's start slot, so leads of different widths (status pills) still start the text at one x. Defaults to auto. |
Examples
Every state of mm-list in Storybook, with keyboard and screen reader tests.