List group
Usage
Use a list group for a single column of similar items, each with a title and one or two details: upcoming services, mechanics on shift, a vehicle's open work orders. Use a table when people compare several fields across rows, and cards when items need media or more text.
- Simple — titles only.
- With meta — trailing number, date or status badge.
- Interactive — each row opens a detail; the title is the link and the whole row is its hit area.
- With actions — one or two row buttons; no stretched link in the same row.
Content: primary text is the object's name; secondary text is one line of context. Trailing meta is short ("12 Nov", "5.5 h", "6 days overdue").
Anatomy
- List —
<ul class="list-group" role="list"> - Row —
li.list-group__item - Leading (optional) —
.list-group__leading: avatar or icon - Content —
.list-group__primaryand.list-group__secondary - Trailing meta (optional) —
.list-group__meta - Actions (optional) —
.list-group__actions - Link (interactive) —
a.list-group__link, stretched over the row
Examples
States marked hover and focus-visible are frozen with .is-hover and .is-focus-visible. Those classes share their rule with the real pseudo-class; never use them in product code.
List group
Rows with a leading avatar or icon, primary and secondary text, and trailing meta or actions.
- Depot north
- Depot south
- Mobile workshop van MW-02
-
Pickup PU-012Oil change · last done 14 Mar
-
Van KX-219Brake pads · 1,800 km left
-
Truck TR-077Tachograph calibration
-
WO-4182 · Brake pads, frontVan KX-219 · Marta Quintero
-
WO-4193 · Wiper bladesPickup PU-012 · Marta Quintero
<ul class="list-group" role="list">
<li class="list-group__item">
<span class="list-group__leading"><svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-truck"></use></svg></span>
<div class="list-group__content"><span class="list-group__primary">Pickup PU-012</span><span class="list-group__secondary">Oil change · last done 14 Mar</span></div>
<span class="list-group__meta"><span class="badge badge--danger"><svg class="badge__icon" aria-hidden="true" focusable="false"><use href="#icon-octagon-alert"></use></svg>6 days overdue</span></span>
</li>
</ul>API
| Hook | Values | Purpose |
|---|---|---|
.list-group | block class | Bordered list |
.list-group--interactive | modifier class | Hover fill on rows with a .list-group__link |
.list-group__item | __leading | __content | __primary | __secondary | __meta | __actions | part classes | Row slots |
.list-group__link | part class | Row link; focus ring is drawn on the row |
aria-current="page" | attribute on the link | Current row: teal fill and start bar |
.is-hover | .is-focus-visible | docs-only class (on the row) | Freeze states |
Do and don't
Row link "Marta Quintero" + trailing "5.5 h"
Stretched row link plus Edit and Close buttons in the same row
"6 days overdue" badge
<div> rows without a list
ul.Accessibility
| Key | Behavior |
|---|---|
| Tab | Moves to each row link, or to each row's action buttons |
| Enter | Follows the row link / activates the focused button |
- Role: list with
role="list"kept explicitly (Safari drops list semantics whenlist-style: none). - Interactive rows: the link name is the title only; the whole row is clickable through the stretched
::after. Focus ring is drawn inset around the row. - Row buttons repeat a short label ("Edit") and are described by the row title via
aria-describedby, so they read "Edit, WO-4182 · Brake pads, front". - Current row:
aria-current="page"on the link, shown with a fill and a start-edge bar (not color alone). - Rows are at least 44px high.
Tokens
| Custom property | Purpose |
|---|---|
--color-elevation-surface-raised | List surface |
--color-border-default | Border and row dividers |
--color-action-ghost-bg-hover | Row hover |
--color-selected-bg | -fg | -border | Current row |
--color-text-muted | Secondary text, meta, leading icon |
--size-touch-target | Minimum row height |
--density-compact-cell-padding-y | Compact row padding |
--focus-ring-* | Row focus ring |