Description list
Description list — the label/value pairs that describe one thing: an order summary, a person's contact details, the specifications of a product.
Examples
- Order number
- EG-2026-00841
- Placed
- 8 August 2026
- Telephone
- +39 02 1234 5678
- +39 348 999 1122
<dl class="dl dl-inline">
<div>
<dt>Order number</dt>
<dd>EG-2026-00841</dd>
</div>
<div>
<dt>Placed</dt>
<dd>8 August 2026</dd>
</div>
<div>
<dt>Telephone</dt>
<dd>+39 02 1234 5678</dd>
<dd>+39 348 999 1122</dd>
</div>
</dl>One order’s number, date and total is a description list. Three orders each with a number, a date and a total is a table — two axes, where a cell means nothing without both its headers.
Ask how many things are being described, not how it looks.
Tokens 13
Level 2, declared on .dl itself. Set any of them on that selector to restyle this component without touching the skin.
| Token | Default |
|---|---|
| --dl-divider-color | var(--color-border-subtle) |
| --dl-divider-gap | var(--space-3) |
| --dl-divider-width | var(--border-width) |
| --dl-label-color | var(--color-on-surface-muted) |
| --dl-label-font-size | var(--font-size-sm) |
| --dl-label-font-weight | var(--font-weight-medium) |
| --dl-label-inline-size | 12rem |
| --dl-label-line-height | var(--line-height-snug) |
| --dl-value-color | var(--color-on-surface) |
| --dl-value-font-size | var(--font-size-sm) |
| --dl-column-gap | var(--space-6) |
| --dl-pair-gap | var(--space-1) |
| --dl-row-gap | var(--space-4) |
Variants and states
Variants
.dl-inline
Inside it
.dl-divided
State it reads
None.
Before you ship it
What you have to do 3 requirements
- A
<dt>is a term, not a heading. Do not put an<h3>inside one to make it louder; change--dl-label-font-sizeinstead. - Give the list a heading or an
aria-labelledbywhen the page has more than one, because "Order number, EG-2026-00841" says nothing about which order. - Only
<dt>,<dd>and — with the wrapper shape —<div>may be children of a<dl>. Anything else is invalid HTML and this file does not style it.
src/css/components/description-list.css · npx mostlycss add description-list