# Summary list Summary lists show information as key/value pairs, one row per pair. ## Preview ```html title="Summary list"
Name
Alex Nurse
Date of birth
14 March 1990
National registration number
900314-0052
Have you been known by any other last name?
No
``` ```tsx import { SummaryList } from '@govtech-bb/react'; ; ``` 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 (`
`), so each key is a `
` and each value a `
`. 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](/patterns/check-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. ```html title="Summary section"

Tell us about yourself

Change tell us about yourself
Title
Mr
First name
Alex
``` ```tsx import { SummaryList } from '@govtech-bb/react'; ; ``` The section heading defaults to an `

`; 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. ```html title="Two stacked sections"

Tell us about yourself

Change tell us about yourself
Name
Alex Nurse

Your contact details

Change your contact details
Email address
alex.nurse@example.com
``` 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. ### Router links Change links are plain `` 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 `
` 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](/patterns/check-answers/) page, prefer one link per [summary section](#sections) instead. ```html title="Summary list with actions"
Name
Alex Nurse
Change name
Date of birth
14 March 1990
Change date of birth
``` ```tsx import { SummaryList } from '@govtech-bb/react'; ; ``` `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](/styles/text-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.