Summary list
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:
- a question
- a response
- optional action buttons (buttons styled as links)
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:
- tabular data, instead try using a table
- simple lists, instead try using an ordered or unordered list
- a list of tasks, instead try using a task list
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.
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
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.
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback