Summary list
Sample HTML
<ol class="ds_summary-list">
<li class="ds_summary-list__item"><span class="ds_summary-list__key">Have you had the grant 3 times or more since 1 May 2022?</span> <span class="ds_summary-list__value" id="q1"> <span class="visually-hidden">Your answer is: </span> <q class="ds_summary-list__answer">No</q></span>
<div class="ds_summary-list__actions">
<ul class="ds_summary-list__actions-list">
<li class="ds_summary-list__actions-list-item"><button class="ds_link" aria-describedby="q1">Change <span class="visually-hidden">your answer for: <q>Have you had the grant 3 times or more since 1 May 2022?</q></span></button></li>
</ul>
</div>
</li>
<li class="ds_summary-list__item"><span class="ds_summary-list__key">Which council area do you live in?</span> <span class="ds_summary-list__value" id="q2"> <span class="visually-hidden">Your answer is: </span> <q class="ds_summary-list__answer">City of Edinburgh</q></span>
<div class="ds_summary-list__actions">
<ul class="ds_summary-list__actions-list">
<li class="ds_summary-list__actions-list-item"><button class="ds_link" aria-describedby="q2">Change <span class="visually-hidden">your answer for: <q>Which council area do you live in?</q></span></button></li>
</ul>
</div>
</li>
<li class="ds_summary-list__item"><span class="ds_summary-list__key">Do you work?</span> <span class="ds_summary-list__value" id="q3"> <span class="visually-hidden">Your answer is: </span> <q class="ds_summary-list__answer">Yes</q></span>
<div class="ds_summary-list__actions">
<ul class="ds_summary-list__actions-list">
<li class="ds_summary-list__actions-list-item"><button class="ds_link" aria-describedby="q3">Change <span class="visually-hidden">your answer for: <q>Do you work?</q></span></button></li>
</ul>
</div>
</li>
<li class="ds_summary-list__item"><span class="ds_summary-list__key">Will you lose earnings because you need to self-isolate?</span> <span class="ds_summary-list__value" id="q4"> <span class="visually-hidden">Your answer is: </span> <q class="ds_summary-list__answer">Yes</q></span>
<div class="ds_summary-list__actions">
<ul class="ds_summary-list__actions-list">
<li class="ds_summary-list__actions-list-item"><button class="ds_link" aria-describedby="q4">Change <span class="visually-hidden">your answer for: <q>Will you lose earnings because you need to self-isolate?</q></span></button></li>
</ul>
</div>
</li>
<li class="ds_summary-list__item"><span class="ds_summary-list__key">Have you tested positive for Covid?</span> <span class="ds_summary-list__value" id="q5"> <span class="visually-hidden">Your answer is: </span> <q class="ds_summary-list__answer">No - I need a PCR test or to rebook a PCR test</q></span>
<div class="ds_summary-list__actions">
<ul class="ds_summary-list__actions-list">
<li class="ds_summary-list__actions-list-item"><button class="ds_link" aria-describedby="q5">Change <span class="visually-hidden">your answer for: <q>Have you tested positive for Covid?</q></span></button></li>
</ul>
</div>
</li>
</ol>About this component
Items in a summary list have:
- a question
- a response
- optional action buttons
There is an item in the summary list for every question the user has been asked. If a user has been able to skip past a question without answering it, for example if the question is optional, the question should still be included along with an 'empty' response, such as the words 'not applicable' or 'not answered'.
Each action button should take the user back to where they were asked the question it relates to. This lets the user enter a different response if they want to.
When to use this component
A summary list should be used in forms to give the user an opportunity to review their responses. This could be a separate page, to let the user check their responses before submitting a form, or the list could feature on every page of a form, so users can track their answers throughout.
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.
Do not remove the borders when there are action buttons. The borders help sighted users to associate the action with the correct summary list item.
You can remove the borders by adding the ds_summary-list--no-border modifier class to the summary list.
Sample HTML
<ol class="ds_summary-list ds_summary-list--no-border">
<li class="ds_summary-list__item"><span class="ds_summary-list__key">Have you had the grant 3 times or more since 1 May 2022?</span> <span class="ds_summary-list__value"> <span class="visually-hidden">Your answer is:</span> <q class="ds_summary-list__answer">No</q> </span></li>
<li class="ds_summary-list__item"><span class="ds_summary-list__key">Which council area do you live in?</span> <span class="ds_summary-list__value"> <span class="visually-hidden">Your answer is:</span> <q class="ds_summary-list__answer">City of Edinburgh</q> </span></li>
<li class="ds_summary-list__item"><span class="ds_summary-list__key">Do you work?</span> <span class="ds_summary-list__value"> <span class="visually-hidden">Your answer is:</span> <q class="ds_summary-list__answer">Yes</q> </span></li>
<li class="ds_summary-list__item"><span class="ds_summary-list__key">Will you lose earnings because you need to self-isolate?</span> <span class="ds_summary-list__value"> <span class="visually-hidden">Your answer is:</span> <q class="ds_summary-list__answer">Yes</q> </span></li>
<li class="ds_summary-list__item"><span class="ds_summary-list__key">Have you tested positive for Covid?</span> <span class="ds_summary-list__value"> <span class="visually-hidden">Your answer is:</span> <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 showing multiple summary lists on a page then you may want to separate them into cards. This adds increased visual separation between summary lists. Summary cards can also have optional action buttons that apply to the entire list rather than individual list items.
When using summary cards:
- only group related types of summary lists, such as people
- make the card titles unique and able to describe what information is within the card, such as the person's name
Sample HTML
<div class="ds_summary-card">
<div class="ds_summary-card__header">
<h3 class="ds_summary-card__header-title">Joe Bloggs</h3>
<ul class="ds_summary-card__actions-list">
<li class="ds_summary-card__actions-list-item"><button class="ds_link"> Change <span class="visually-hidden">your answers for: <q>Joe Bloggs</q></span> </button></li>
<li class="ds_summary-card__actions-list-item"><button class="ds_link"> Delete <span class="visually-hidden">your answers for: <q>Joe Bloggs</q></span> </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"> <span class="visually-hidden">Your answer is:</span> <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"> <span class="visually-hidden">Your answer is:</span> <q class="ds_summary-list__answer">Victoria Quay<br>
Edinburgh<br>
EH6 6QQ</br></br></q> </span></li>
</ul>
</div>
</div>
<div class="ds_summary-card">
<div class="ds_summary-card__header">
<h3 class="ds_summary-card__header-title">Mary Smith</h3>
<ul class="ds_summary-card__actions-list">
<li class="ds_summary-card__actions-list-item"><button class="ds_link"> Change <span class="visually-hidden">your answers for: <q>Mary Smith</q></span> </button></li>
<li class="ds_summary-card__actions-list-item"><button class="ds_link"> Delete <span class="visually-hidden">your answers for: <q>Mary Smith</q></span> </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"> <span class="visually-hidden">Your answer is:</span> <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"> <span class="visually-hidden">Your answer is:</span> <q class="ds_summary-list__answer">St. Andrew's House<br>
Regent Road<br>
Edinburgh<br>
EH1 3DG</br></br></br></q> </span></li>
</ul>
</div>
</div>Evidence
This component is similar to the GOV.UK summary list component which is being used by a number of UK Government departments.
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 data attribute is added automatically by the Design System’s ‘tracking’ script.
Accessibility
While the action buttons are clearly related to information in the summary list for sighted users, additional text is added to help screen reader users know the context for the button actions. For example, instead of just hearing the word ‘Change’ they might hear ‘Change your answer for “Which council area do you live in?”’. This additional text is also used by the Design System’s tracking script when it adds a tracking data attribute to the action button.
Additional text can also be added to the user’s responses. In the examples on this page the user’s responses have the text ‘your answer is’ inserted before the response. The full content that a screen reader would read out for the council area example would therefore be: ‘Which council area do you live in? Your answer is “Aberdeen City Council”. Change your answer for “Which council area do you live in?”’
The buttons are also associated with the user’s answer using aria-describedby. If a screen reader user is skipping through a page link by link they will hear the answer as well as being given the option to change it. In VoiceOver this is read out as, ‘Change your answer for “Which council area do you live in?”, button. Your answer is “Aberdeen City Council”’. The user is told both the question and their response.
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