# Summary list

Status: stable

Key and value pairs for one record, such as a property or tenancy.

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.

## Example

```html
<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>
```

## Anatomy

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

- **Columns**: grid-template-columns: minmax(8rem, 1fr) 2fr; key column at least 128px

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

## Variants

### Summary list

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

```html
<dl class="at-summary"><dt>Status</dt><dd><span class="at-tag at-tag--success">Active</span></dd><dt>Supplier</dt><dd>Octopus Energy</dd><dt>Last reading</dt><dd>4 Oct 2026</dd></dl>
```

### In a card

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

```html
<div class="at-card"><h2 class="at-card__title">Tenancy</h2><dl class="at-summary"><dt>Start</dt><dd>1 Sep 2026</dd><dt>End</dt><dd>31 Aug 2027</dd></dl></div>
```

## 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

Do: Formatted money, and "Not set" for a missing value.

```html
<dl class="at-summary"><dt>Rent</dt><dd>&pound;650.00 per month</dd><dt>Deposit</dt><dd>Not set</dd></dl>
```

Don't: Database names as keys, and a blank value.

```html
<dl class="at-summary"><dt>rent_amount</dt><dd>650</dd><dt>deposit_amount</dt><dd></dd></dl>
```

## Do

- Keep keys short.

## Don't

- Put form inputs in it.

## Code

```html
<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

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

## Accessibility

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