Skip to main content
Official government website
GovBB Design System
Menu

Summary list

Summary lists show information as key/value pairs, one row per pair.

Examples
HTML and React
Group
Content
On this page

Preview

Summary list
Open in new tab

The Summary list component displays pairs of related information (a bold key and a plain value), one row per pair. It is built on a description list (<dl>), so each key is a <dt> and each value a <dd>. On small screens the key stacks above the value; from tablet widths up they sit side by side with the keys in a fixed-width column.

Sections

On a check your answers page, wrap each page’s answers in a summary section: a heading, one change link for the whole section, and a rule closing it off. The change link returns the user to the form page the section summarises; give it visually hidden text naming the section so screen reader users can tell the “Change” links apart.

Summary section
Open in new tab

The section heading defaults to an <h2>; set section.headingLevel when it sits under a different heading structure.

Stacking sections

Sections space themselves: 24px between siblings, matching the gap between answer groups in the check-your-answers comp. Stack them one after another and add nothing.

Two stacked sections
Open in new tab

The spacing is a top margin on every section after the first, so a stack never carries a dangling margin at either end. If your page lays its own blocks out with a flex or grid gap, that gap and these margins would space the sections twice — set --govbb-summary-section-gap: 0 on the page (or on any ancestor of the stack) and let the gap do the work. Set it to a --govbb-space-* value to space the sections differently.

Change links are plain <a> elements. In React, linkComponent swaps in a router link that takes an href. For a router whose link takes something else — TanStack Router’s takes to — use renderLink instead: it is called with { href, className, children }, where children is the label plus any visually hidden text, and it takes precedence over linkComponent.

Row actions

Add a change link to a row when an individual answer can be revisited on its own. The link sits in its own <dd> at the end of the row; give each one visually hidden text naming the row so screen reader users hear “Change name”, not three identical “Change” links. On a check your answers page, prefer one link per summary section instead.

Summary list with actions
Open in new tab

actions takes one link or an array; pass linkComponent to render them with a router link.

Usage

When to use

  • Use a summary list for key–value facts about one person, application, service or record.
  • Use it to let users review answers before submitting a service.

When not to use

  • Do not use it to compare the same fields across several records; use a table.
  • Do not use it for a plain list of links, tasks or steps.

Best practices

Use clear keys and complete values

Choose short keys in sentence case, such as “Date of birth”, and show the value exactly as users need to verify it. Long values such as email addresses and references wrap inside their column. Group multiple summary lists under meaningful headings.

Give every action context

If a row includes a “Change” link, add visually hidden text such as “Change date of birth” so links remain distinct out of context. Return users to the review page after the change.