List
Native ul / ol / dl. Gap --space-2. Item slot.
Spec
- Use the element that matches the relationship: unordered, ordered, name/value.
- Gap
--space-2between items. - Item slot: text, metric, control — the list does not restyle the child into a card.
- Don't fake a list with a stack of divs when the relationship is a list.
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
ul
- eu-west · 1.4s p95
- us-east · 890ms p95
- ap-south · 2.1s p95
ol
- Confirm the range.
- Export CSV.
- Attach to the incident.
dl
- Ingest p95
- 1.4s
- Error budget
- 14%
- Last export
- 12:04
Do / Don't
| Do | Don't |
|---|---|
| Native lists. | Div soup with bullets in CSS. |
dl for name/value metrics. | A table of two columns for three pairs. |
Motion
Stagger only on enter of a newly populated list, 40ms --stagger. Reduced: no stagger.
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
| opacity | 280ms + 40ms --stagger | --ease-out | mount | no stagger |
Accessibility
- Lists are announced with item count. Don't break that with
display: contentson theul. - Interactive items: the control inside is named. Don't make the
lia button. - These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.