You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

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.

Components

Summary list

Last updated
25 September 2024 - 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
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.

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.

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.

First published
20 December 2022
Last updated
25 September 2024 - show all updates

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

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

Back to top