Summary List
A key-value list for presenting information in a structured, scannable format. Used for review pages, profile summaries, order confirmations, and any context where data is presented as label-value pairs.
When to use
- Summarising user answers on a review or confirmation page
- Displaying profile or account details
- Showing order information or metadata
- Any key-value pair display with optional edit actions
When not to use
- Tabular data with multiple columns — use Table
- Expandable/collapsible content — use Details or Accordion
- Navigation — use Card
Default
Key-value pairs with optional action links.
Borderless
Removes row dividers for a cleaner look.
Card
Wraps the list in a card with a title and optional card-level actions.
Read-only (no actions)
Add summary-list__row--no-actions when a row has no action column.
CSS classes
| Class | Description |
|---|---|
.summary-list | Root <dl> element |
.summary-list--borderless | Removes row borders |
.summary-list__row | Row wrapper <div> inside <dl> |
.summary-list__row--no-actions | Row without action column |
.summary-list__key | <dt> label |
.summary-list__value | <dd> value |
.summary-list__actions | <dd> actions container |
.summary-list__action | Action button/link |
.summary-card | Card wrapper |
.summary-card__header | Card header with title and actions |
.summary-card__title | Card title |
.summary-card__actions | Card-level actions |
.summary-card__content | Card body containing <dl> |
Accessibility
- Uses native
<dl>/<dt>/<dd>semantics — no ARIA roles needed - Action links include visually hidden text via
.sr-onlyfor context (e.g. "Change, name") - Card titles use semantic headings (
<h2>–<h4>) - Responsive: stacks vertically on small screens