Content presentation - Summary list
Use the summary list to summarise information, for example, a user’s responses at the end of a form.
<dl class="nhsuk-summary-list">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
<dd class="nhsuk-summary-list__actions">
<a href="#">
Change<span class="nhsuk-u-visually-hidden"> name</span>
</a>
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
<dd class="nhsuk-summary-list__actions">
<a href="#">
Change<span class="nhsuk-u-visually-hidden"> date of birth</span>
</a>
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Contact information
</dt>
<dd class="nhsuk-summary-list__value">
73 Roman Rd<br>Leeds<br> LS2 5ZN
</dd>
<dd class="nhsuk-summary-list__actions">
<a href="#">
Change<span class="nhsuk-u-visually-hidden"> contact information</span>
</a>
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Contact details
</dt>
<dd class="nhsuk-summary-list__value">
<p>07700 900362</p>
<p>karen.francis@example.com</p>
</dd>
<dd class="nhsuk-summary-list__actions">
<a href="#">
Change<span class="nhsuk-u-visually-hidden"> contact details</span>
</a>
</dd>
</div>
</dl>
{% from "summary-list/macro.njk" import summaryList %}
{{ summaryList({
rows: [
{
key: {
text: "Name"
},
value: {
text: "Karen Francis"
},
actions: {
items: [
{
href: "#",
text: "Change",
visuallyHiddenText: "name"
}
]
}
},
{
key: {
text: "Date of birth"
},
value: {
text: "15 March 1984"
},
actions: {
items: [
{
href: "#",
text: "Change",
visuallyHiddenText: "date of birth"
}
]
}
},
{
key: {
text: "Contact information"
},
value: {
html: "73 Roman Rd<br>Leeds<br> LS2 5ZN"
},
actions: {
items: [
{
href: "#",
text: "Change",
visuallyHiddenText: "contact information"
}
]
}
},
{
key: {
text: "Contact details"
},
value: {
html: '<p>07700 900362</p><p>karen.francis@example.com</p>'
},
actions: {
items: [
{
href: "#",
text: "Change",
visuallyHiddenText: "contact details"
}
]
}
}
]
}) }}
When 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"
Think about how you can use the summary list along with other components or patterns to give users a sense of control. You can use it to summarise a user’s responses at the end of a form, for example as part of the GOV.UK check answers pattern.
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. (See the GOV.UK task list page pattern.) For those, use a <table>
, <ul>
or <ol>
.
How to use summary lists
There are 2 ways to use the summary list component. You can use HTML or, if you’re using Nunjucks or the NHS.UK prototype kit, you can use the Nunjucks macro.
<dl class="nhsuk-summary-list">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
<dd class="nhsuk-summary-list__actions">
<a href="#">
Change<span class="nhsuk-u-visually-hidden"> name</span>
</a>
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
<dd class="nhsuk-summary-list__actions">
<a href="#">
Change<span class="nhsuk-u-visually-hidden"> date of birth</span>
</a>
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Contact information
</dt>
<dd class="nhsuk-summary-list__value">
73 Roman Rd<br>Leeds<br> LS2 5ZN
</dd>
<dd class="nhsuk-summary-list__actions">
<a href="#">
Change<span class="nhsuk-u-visually-hidden"> contact information</span>
</a>
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Contact details
</dt>
<dd class="nhsuk-summary-list__value">
<p>07700 900362</p>
<p>karen.francis@example.com</p>
</dd>
<dd class="nhsuk-summary-list__actions">
<a href="#">
Change<span class="nhsuk-u-visually-hidden"> contact details</span>
</a>
</dd>
</div>
</dl>
{% from "summary-list/macro.njk" import summaryList %}
{{ summaryList({
rows: [
{
key: {
text: "Name"
},
value: {
text: "Karen Francis"
},
actions: {
items: [
{
href: "#",
text: "Change",
visuallyHiddenText: "name"
}
]
}
},
{
key: {
text: "Date of birth"
},
value: {
text: "15 March 1984"
},
actions: {
items: [
{
href: "#",
text: "Change",
visuallyHiddenText: "date of birth"
}
]
}
},
{
key: {
text: "Contact information"
},
value: {
html: "73 Roman Rd<br>Leeds<br> LS2 5ZN"
},
actions: {
items: [
{
href: "#",
text: "Change",
visuallyHiddenText: "contact information"
}
]
}
},
{
key: {
text: "Contact details"
},
value: {
html: '<p>07700 900362</p><p>karen.francis@example.com</p>'
},
actions: {
items: [
{
href: "#",
text: "Change",
visuallyHiddenText: "contact details"
}
]
}
}
]
}) }}
Summary list with actions
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 action 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".
<dl class="nhsuk-summary-list">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
<dd class="nhsuk-summary-list__actions">
<a href="#">
Change<span class="nhsuk-u-visually-hidden"> name</span>
</a>
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
<dd class="nhsuk-summary-list__actions">
<a href="#">
Change<span class="nhsuk-u-visually-hidden"> date of birth</span>
</a>
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Contact information
</dt>
<dd class="nhsuk-summary-list__value">
73 Roman Rd<br>Leeds<br> LS2 5ZN
</dd>
<dd class="nhsuk-summary-list__actions">
<a href="#">
Change<span class="nhsuk-u-visually-hidden"> contact information</span>
</a>
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Contact details
</dt>
<dd class="nhsuk-summary-list__value">
<p>07700 900362</p>
<p>karen.francis@example.com</p>
</dd>
<dd class="nhsuk-summary-list__actions">
<a href="#">
Change<span class="nhsuk-u-visually-hidden"> contact details</span>
</a>
</dd>
</div>
</dl>
{% from "summary-list/macro.njk" import summaryList %}
{{ summaryList({
rows: [
{
key: {
text: "Name"
},
value: {
text: "Karen Francis"
},
actions: {
items: [
{
href: "#",
text: "Change",
visuallyHiddenText: "name"
}
]
}
},
{
key: {
text: "Date of birth"
},
value: {
text: "15 March 1984"
},
actions: {
items: [
{
href: "#",
text: "Change",
visuallyHiddenText: "date of birth"
}
]
}
},
{
key: {
text: "Contact information"
},
value: {
html: "73 Roman Rd<br>Leeds<br> LS2 5ZN"
},
actions: {
items: [
{
href: "#",
text: "Change",
visuallyHiddenText: "contact information"
}
]
}
},
{
key: {
text: "Contact details"
},
value: {
html: '<p>07700 900362</p><p>karen.francis@example.com</p>'
},
actions: {
items: [
{
href: "#",
text: "Change",
visuallyHiddenText: "contact details"
}
]
}
}
]
}) }}
Summary list without actions
<dl class="nhsuk-summary-list">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Contact information
</dt>
<dd class="nhsuk-summary-list__value">
73 Roman Rd<br>Leeds<br> LS2 5ZN
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Contact details
</dt>
<dd class="nhsuk-summary-list__value">
<p>07700 900362</p>
<p>karen.francis@example.com</p>
</dd>
</div>
</dl>
{% from "summary-list/macro.njk" import summaryList %}
{{ summaryList({
rows: [
{
key: {
text: "Name"
},
value: {
text: "Karen Francis"
}
},
{
key: {
text: "Date of birth"
},
value: {
text: "15 March 1984"
}
},
{
key: {
text: "Contact information"
},
value: {
html: "73 Roman Rd<br>Leeds<br> LS2 5ZN"
}
},
{
key: {
text: "Contact details"
},
value: {
html: '<p>07700 900362</p><p>karen.francis@example.com</p>'
}
}
]
}) }}
Summary list without actions or borders
If you do not include actions in your summary list and it would be better for your design to remove the separating borders, use the nhsuk-summary-list--no-border
class.
<dl class="nhsuk-summary-list nhsuk-summary-list--no-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Contact information
</dt>
<dd class="nhsuk-summary-list__value">
73 Roman Rd<br>Leeds<br> LS2 5ZN
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Contact details
</dt>
<dd class="nhsuk-summary-list__value">
<p>07700 900362</p>
<p>karen.francis@example.com</p>
</dd>
</div>
</dl>
{% from "summary-list/macro.njk" import summaryList %}
{{ summaryList({
classes: 'nhsuk-summary-list--no-border',
rows: [
{
key: {
text: "Name"
},
value: {
text: "Karen Francis"
}
},
{
key: {
text: "Date of birth"
},
value: {
text: "15 March 1984"
}
},
{
key: {
text: "Contact information"
},
value: {
html: "73 Roman Rd<br>Leeds<br> LS2 5ZN"
}
},
{
key: {
text: "Contact details"
},
value: {
html: '<p>07700 900362</p><p>karen.francis@example.com</p>'
}
}
]
}) }}
Help improve this page
The manual is a community effort. Anyone can help improve and grow it.
To help make sure the Summary list guidance is useful, relevant and up to date, you can:
- share research or feedback about the Summary list component on GitHub
- propose a code change to this page on GitHub
Need help?
If you’ve got a question about the NHS digital service manual or want to feedback, get in touch.
Updated: August 2020