Skip to main content
Design system

Beta This is a new service. Your feedback will help us improve it.

Summary list

Updated in October 2026

Use the summary list to summarise information, for example, a user's responses at the end of a form.

Open this example in a new tab

Carys Jenkins

Name
Carys Jenkins
Change name
Appointment date
15 March 2027
Change appointment date
Contact details

07700 900362

carys.jenkins@example.com

Change contact details

When to use summary lists

Use a summary list to present key information in a clear, easy-to-scan format. Summary lists are often used to help users review information before taking an action, such as submitting a form.

When not to use summary lists

The summary list uses the description list <dl> HTML element, so only use it to present information that has a key and at least 1 value.

Do not use it for tabular data or a simple list of information or tasks, like a task list page. For those, use a <table>, <ul> or <ol>. Read more about the Complete multiple tasks pattern in the NHS England Design System.

How to use summary lists

Use the summary list component to present pairs of related information, known as key-value pairs, in a list, where:

  • the key is a label, like "Name"
  • the value is the piece of information itself, like "John Smith"

Summary lists help users review information quickly and can be used alongside other components and patterns, such as the Check answers pattern from the NHS England Design System, to give users confidence and control before they continue.

Accessibility

Make sure any "Change" or other action links are at least 24px by 24px in size, or have adequate spacing. This is to make sure users can easily interact with the links. This supports WCAG 2.2 Success Criterion 2.5.8 Target Size, level AA.

When users go back to a previous answer through a link, pre-populate any information they have already entered.

Do not pre-populate information that is no longer valid, or where doing so would create a safety or security risk. This supports WCAG 2.2 Success Criterion 3.3.7 Redundant Entry, level A.

Source

Learn more about Summary lists in the NHS England Design System.

Follow discussions about Summary lists on NHS England GitHub to see the latest updates and resolved issues.

Back to top

Summary list variants

Summary list with actions

Open this example in a new tab

Carys Jenkins

Name
Carys Jenkins
Change
Appointment date
15 March 2027
Change
Contact details

07700 900362

carys.jenkins@example.com

Change

You can add actions to a summary list, like a "Change" link to let users go back and edit their answer.

People who use assistive technology, like a screen reader, may hear the links out of context and not know what they do. To give more context, add visually hidden text to the links. This means a screen reader user will hear a meaningful action, like "Change name" or "Change date of birth".

Summary list without actions

Open this example in a new tab

Summary card header

Name
Carys Jenkins
Date of birth
11 December 1975
Contact details

07700 900362

carys.jenkins@example.com

Summary list without actions or borders

Open this example in a new tab
Name
Carys Jenkins
Date of birth
11 December 1975
Contact information

17 Clos y Nant

Carmarthen

SA31 9ZZ

Contact details

07700 900362

carys.jenkins@example.com

The borderless summary list may be helpful when your summary list does not include actions and the borders do not add value to the content.

Open this example in a new tab

Carys Jenkins

Name
Carys Jenkins
Change
Appointment date
15 March 2027
Change
Contact details

07700 900362

carys.jenkins@example.com

Change

Summary cards

If you're showing multiple summary lists on a page, you can show each list within a summary card. This lets you visually separate each summary list and give each a title and some actions.

Use summary cards when you need to show:

  • multiple summary lists that all describe the same type of thing, such as people
  • actions that will apply to all the items in a list

Summary cards are often used in case working systems to help users quickly view a set of information and related actions.

Do not use summary cards if you only need to show a small amount of related information. Use summary lists instead and structure them with headings if needed.

If you're showing summary cards at the end of a longer journey, you might want to familiarise the user with them earlier on, such as when the user reviews individual sections.

Card titles

Use the summary card's header area to give each summary list a title.

Each title must be unique and help identify what the summary list describes. For example, this could be the name of a specific person, organisation or professional qualification.

Try to keep titles short and relevant. You can use 1 or 2 important values in the summary list, such as the first and last name of a person.

Open this example in a new tab

Carys Jenkins

Name
Carys Jenkins
Appointment date
15 March 2027
Contact details

07700 900362

carys.jenkins@example.com

Ifan Hughes

Name
Ifan Hughes
Appointment date
28 March 2027
Contact details

07450 340339

ifan.hughes@example.com

Card actions

You can add card actions in the header, which will be shown after the summary card's title.

For example, if you have multiple rows with "change" actions that all take the user to the same place, you can show a single "change" card action instead. This helps avoid repeating the same row action on every row.

Card actions are shown in bold text to make them visually distinct from row actions. They help alert the user that the card action will affect the entire summary card.

Write link text for card actions to tell the user what it will do and that it will apply to the entire summary card. It should also be as short as possible, usually 2 words.

Example card actions include:

  • Remove appointment
  • Edit appointment
  • Update issue
  • Approve application
  • Cancel order

Keep it short and do not add more than 2 to 3 actions in a header.

If a card action cannot easily be undone or might have serious consequences, consider adding a warning or asking the user for confirmation.

Showing missing information

In some contexts, you might need to show rows that have missing information. This can happen when:

  • a user returns to an incomplete journey
  • you've added or changed the questions in a service

Show a link to the appropriate question page in the value column so the user can enter the missing information, instead of showing a "change" link on that row.

Back to top

Examples

Welsh Immunisation System (WIS)

This example shows a "Check and confirm" page from the public-facing section of the School-age Immunisations service within WIS where a parent or guardian is completing a vaccination consent form. It uses a series of summary lists to organise complex user responses clearly.

Check and confirm page with summary cards for consent and child details

Choose Pharmacy

This example shows a "Consultation summary" screen within the clinical workflow of the Choose Pharmacy service. It demonstrates a comprehensive summary list used by clinicians to review all collected patient and clinical data before finalising the record.

Consultation summary screen with multiple summary list sections

Back to top