We use cookies to collect anonymous data to help us improve your site browsing experience.

Click 'Accept all cookies' to agree to all cookies that collect anonymous data. To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.

Set cookie preferences

Your cookie preferences have been saved. You can change your cookie settings at any time.

Help us improve the Design System by taking our short survey.

Components

Summary list

Last updated
7 November 2025 - see all updates
A summary of a user's responses to questions in a form.
Open this example in a new window

Sample HTML 

<ol class="ds_summary-list">
    <li class="ds_summary-list__item">
        <span class="ds_summary-list__key" id="q1">Name</span>
        <span class="ds_summary-list__value"><q class="ds_summary-list__answer">Jane Smith</q></span>
        <div class="ds_summary-list__actions">
            <button type="button" class="ds_link" aria-describedby="q1">Change</button>
        </div>
    </li>
    <li class="ds_summary-list__item">
        <span class="ds_summary-list__key" id="q2">Date of birth</span>
        <span class="ds_summary-list__value"><q class="ds_summary-list__answer">13 April 2001</q></span>
        <div class="ds_summary-list__actions">
            <button type="button" class="ds_link" aria-describedby="q2">Change</button>
        </div>
    </li>
    <li class="ds_summary-list__item">
        <span class="ds_summary-list__key" id="q3">Address</span>
        <span class="ds_summary-list__value"><q class="ds_summary-list__answer">Scottish Government<br>
        St Andrew's House<br>Regent Road<br>Edinburgh<br>EH1 3DG</q></span>
        <div class="ds_summary-list__actions">
            <button type="button" class="ds_link" aria-describedby="q3">Change</button>
        </div>
    </li>
    <li class="ds_summary-list__item">
        <span class="ds_summary-list__key" id="q4">Contact details</span>
        <span class="ds_summary-list__value">
            <ul class="ds_no-bullets">
                <li><q class="ds_summary-list__answer">email@gov.scot</q></li>
                <li><q class="ds_summary-list__answer">0123 456 7000</q></li>
            </ul>
        </span>
        <div class="ds_summary-list__actions">
            <ul class="ds_summary-list__actions-list">
                <li class="ds_summary-list__actions-list-item"><button type="button" class="ds_link" aria-describedby="q4">Add</button></li>
                <li class="ds_summary-list__actions-list-item"><button type="button" class="ds_link" aria-describedby="q4">Change</button></li>
            </ul>
        </div>
    </li>
</ol>

About this component

Items in a summary list have:

There's an item in the summary list for every question you've asked the user. If a user did not answer a question, show the question with an 'empty' response, such as 'not applicable' or 'not answered'.

Each action button should take the user back to the question it relates to. This lets the user change their response. Allowing users to correct errors is good form design. 

When to use this component

Use a summary list in forms so users can review their responses.

You can include it:

  • as a separate page, to let users check their responses before submitting a form

  • on every page of a form, so users can track their answers while they progress

When not to use this component

Do not use a summary list for:

Other versions of this component

Summary list without borders

If a summary list has no action buttons, you can also choose to remove the borders separating items in the list.

You can remove the borders by adding the ds_summary-list--no-border modifier class to the summary list.

Do not remove the borders when there are action buttons. The borders help users to associate the action with the correct summary list item.

Open this example in a new window

Sample HTML 

<ol class="ds_summary-list  ds_summary-list--no-border">
    <li class="ds_summary-list__item">
        <span class="ds_summary-list__key" id="q1">Have you had the grant 3 times or more since 1 May 2022?</span>
        <span class="ds_summary-list__value"><q class="ds_summary-list__answer">No</q></span>
    </li>
    <li class="ds_summary-list__item">
        <span class="ds_summary-list__key" id="q2">Which council area do you live in?</span>
        <span class="ds_summary-list__value"><q class="ds_summary-list__answer">City of Edinburgh</q></span>
    </li>
    <li class="ds_summary-list__item">
        <span class="ds_summary-list__key" id="q3">Do you work?</span>
        <span class="ds_summary-list__value"><q class="ds_summary-list__answer">Yes</q></span>
    </li>
    <li class="ds_summary-list__item">
        <span class="ds_summary-list__key" id="q4">Will you lose earnings because you need to self-isolate?</span>
        <span class="ds_summary-list__value"><q class="ds_summary-list__answer">Yes</q></span>
    </li>
    <li class="ds_summary-list__item">
        <span class="ds_summary-list__key" id="q5">Have you tested positive for Covid?</span>
        <span class="ds_summary-list__value"><q class="ds_summary-list__answer">No - I need a PCR test or to rebook a PCR test</q></span>
    </li>
</ol>

Summary card

If you show multiple summary lists on a page then you can separate them into cards. This adds visual separation between summary lists.

For example, summary cards are used in add more fields. 

Summary cards can have action buttons that apply to the entire list, such as 'change' and 'delete'. They're buttons styled as links. 

When using summary cards:

  • only group related types of summary lists, such as people
  • add card titles that say what information is within the card, such as a name
  • make the card titles unique for each card
  • only add action buttons for the whole summary card, not for each item in the list 
Open this example in a new window

Sample HTML 

<div class="ds_summary-card">
    <div class="ds_summary-card__header">
        <h3 class="ds_summary-card__header-title" id="card-1-title">Joe Bloggs</h3>
        <ul class="ds_summary-card__actions-list">
            <li class="ds_summary-card__actions-list-item">
                <button type="button" class="ds_link" aria-describedby="card-1-title">Change</button>
            </li>
            <li class="ds_summary-card__actions-list-item">
                <button type="button" class="ds_link" aria-describedby="card-1-title">Delete</button>
            </li>
        </ul>
    </div>
    <div class="ds_summary-card__content">
        <ul class="ds_summary-list">
            <li class="ds_summary-list__item">
                <span class="ds_summary-list__key">Phone number</span>
                <span class="ds_summary-list__value"><q class="ds_summary-list__answer">01234 567 890</q> </span>
            </li>
            <li class="ds_summary-list__item">
                <span class="ds_summary-list__key">Address</span>
                <span class="ds_summary-list__value">
                    <q class="ds_summary-list__answer">
                        Victoria Quay<br>
                        Edinburgh<br>
                        EH6 6QQ
                    </q>
                </span>
            </li>
        </ul>
    </div>
</div>

<div class="ds_summary-card">
    <div class="ds_summary-card__header">
        <h3 class="ds_summary-card__header-title" id="card-2-title">Mary Smith</h3>
        <ul class="ds_summary-card__actions-list">
            <li class="ds_summary-card__actions-list-item">
                <button type="button" class="ds_link" aria-describedby="card-2-title">Change</button>
            </li>
            <li class="ds_summary-card__actions-list-item">
                <button type="button" class="ds_link" aria-describedby="card-2-title">Delete</button>
            </li>
        </ul>
    </div>
    <div class="ds_summary-card__content">
        <ul class="ds_summary-list">
            <li class="ds_summary-list__item">
                <span class="ds_summary-list__key">Phone number</span>
                <span class="ds_summary-list__value"><q class="ds_summary-list__answer">01234 098 765</q></span>
            </li>
            <li class="ds_summary-list__item">
                <span class="ds_summary-list__key">Address</span>
                <span class="ds_summary-list__value">
                    <q class="ds_summary-list__answer">St. Andrew's House<br>
                        Regent Road<br>
                        Edinburgh<br>
                        EH1 3DG
                    </q>
                </span>
            </li>
        </ul>
    </div>
</div>

Evidence

This component is similar to the GOV.UK summary list component. Many UK government services use that component.

Accessibility

The action buttons have an aria-describedby attribute to help screen reader users understand the context. The attribute uses the ID of the question or the summary card that the button is related to.

Website analytics

To track interactions with the action buttons in Google Analytics using Google Tag Manager, each button has a data attribute that describes the action.

The Design System’s ‘tracking’ script adds the data attributes.

Tracking attributes

Action buttons can be either a button element or a link.

Buttons get a data-button attribute. Its value uses the pattern button-[label]-[question] where the label is the label of the button and the question is what the button's action applies to.

Links get a data-navigation attribute. Its value uses the pattern navigation-[label]-[question] where the label is the link text and the question is what the link's action applies to. Links will also get a data-section attribute with the name of the closest heading.

<button type="button" class="ds_link" aria-describedby="item-1-key" data-button="button-change-have-you-had-the-grant-3-times-or-more-since-1-may-2022">Change</button>
<a href="#" aria-describedby="item-1-key" data-section="Your answers" data-navigation="navigation-change-have-you-had-the-grant-3-times-or-more-since-1-may-2022">Change</a>

Summary card

Summary cards have additional action buttons that apply to the whole card. These can be either a button or a link.

Buttons get a data-button attribute. Its value uses the pattern button-[label]-[index] where the label is the label of the button and the index is the order of the summary card against other cards on the page.

Links get a data-navigation attribute. Its value uses the pattern navigation-[label]-[index] where the label is the link text and the index is the order of the summary card against other cards on the page. 

<button type="button" class="ds_link" aria-describedby="card-1-title" data-button="button-change-1">Change</button>
<a href="#" class="ds_link" aria-describedby="card-1-title" data-navigation="navigation-add-1">Add</a>
First published
20 December 2022
Last updated
7 November 2025 - show all updates

  1. Small update to summary card section - actions should only be added to a whole summary card, not individual items

  2. Change examples and associated text to simplify what screen readers announce in the component

  3. Add 'summary card' variant and minor documentation changes

Back to top