Summary list

Stable

Summary lists show the details of one record as key and value pairs: a property, a tenancy, a payment. Keys sit in a narrow column on the left and values on the right, with a line between rows.

Use a summary list for one thing. For many things with the same fields, use a table.

Property

Flat 3, 22 Ashby Road

Tenancy

1 Sep 2026 to 31 Aug 2027

Rent

£650.00 per month

---

Specifications

LightDark

Anatomy

Property

Flat 3, 22 Ashby Road

Rent

£650.00 per month

1) Key (dt)

color: var(--at-text-subtle)

font-weight: var(--at-weight-bold)

padding-right: var(--at-space-4) /* 12px */

2) Value (dd)

color: var(--at-text)

font-size: var(--at-text-sm) /* 14px */

3) Row divider

border-bottom: 1px solid var(--at-border)

padding: var(--at-space-3) 0 /* 8px */

Size and spacing

Key

Value

Columns

grid-template-columns: minmax(8rem, 1fr) 2fr

key column at least 128px

Rows

padding: var(--at-space-3) 0 /* 8px */

Summary list

Plain values. Put tags or links in the value column when they help.

LightDark

Example

Status

Active

Supplier

Octopus Energy

Last reading

4 Oct 2026

In a card

Give the record a title by putting the list in a card.

LightDark

Example

Tenancy

Start

1 Sep 2026

End

31 Aug 2027

---

Usage

When to use

• Showing the details of one record.
• A check-your-answers page before saving.

When not to use

• Many records: use a table.
• Editable values: use fields in a form.

Content

• Keys are short nouns: "Rent", "Start date".
• Show an empty value as "Not set", not a blank or a dash.
• Dates as "4 Oct 2026"; money as "£650.00".

Do and don't

Rent

£650.00 per month

Deposit

Not set

DoFormatted money, and "Not set" for a missing value.

rent_amount

650

deposit_amount

Don'tDatabase names as keys, and a blank value.

Do

• Keep keys short.

Don't

• Put form inputs in it.

---

Implementation

HTML

Copy

<dl class="at-summary">
  <dt>Property</dt><dd>Flat 3, 22 Ashby Road</dd>
  <dt>Tenancy</dt><dd>1 Sep 2026 to 31 Aug 2027</dd>
  <dt>Rent</dt><dd>&pound;650.00 per month</dd>
</dl>

Classes

Class	What it does
at-summary	Two-column definition list

Tokens used

--at-border, --at-text-subtle

---

Accessibility

• A dl with dt / dd reads as name and value pairs.

Related

Table

Rows of data the user compares or scans.

View component

Card

A bordered box that groups related content, such as one tenancy or one setting group.

View component

Status tag

A short status label: Paid, Overdue, Draft.

View component