Summary list
Use the summary list to summarise information, such as a user’s responses at the end of a form.
A summary list with various entries
Summary lists contain one or more rows with keys and values. Rows can optionally contain actions which are links to other pages.
The keys and values can either be set using the text
argument or by
passing a block of HTML.
Actions need text
to set the link text and href
for the link target.
When the same action text is used multiple times, like ‘Change’ in the
example below, we can provide the visually_hidden_text
argument to
describe what we’re changing.
The summary list expects rows to have actions, rows without actions
will automatically have the class govuk-summary-list__row--no-actions
applied to maintain consistent alignment.
The visually hidden text will be rendered immediately after the link.
Input
= govuk_summary_list do |summary_list|
- summary_list.row do |row|
- row.key { 'Aardvark' }
- row.value { 'The aardvark is vaguely pig-like in appearance' }
- row.action(text: "Change", href: '#', visually_hidden_text: 'aardvarks')
- summary_list.row do |row|
- row.key(text: 'Baboon')
- row.value(text: 'Monkeys of the genus Papio')
- row.action(text: "Email", href: '#', visually_hidden_text: 'baboons')
- row.action(text: "Change", href: '#', visually_hidden_text: 'baboons')
- summary_list.row do |row|
- row.key(text: 'Chinchilla')
- row.value(text: 'Either of two species of crepuscular rodents')
- row.action(text: 'Change', visually_hidden_text: 'chinchillas', href: '#')
- summary_list.row do |row|
- row.key(text: 'Dugong')
- row.value(text: 'Dugongs are a species of sea cow')
<%= govuk_summary_list do |summary_list|
summary_list.row do |row|
row.key { 'Aardvark' }
row.value { 'The aardvark is vaguely pig-like in appearance' }
row.action(text: "Change", href: '#', visually_hidden_text: 'aardvarks')
end; summary_list.row do |row|
row.key(text: 'Baboon')
row.value(text: 'Monkeys of the genus Papio')
row.action(text: "Email", href: '#', visually_hidden_text: 'baboons')
row.action(text: "Change", href: '#', visually_hidden_text: 'baboons')
end; summary_list.row do |row|
row.key(text: 'Chinchilla')
row.value(text: 'Either of two species of crepuscular rodents')
row.action(text: 'Change', visually_hidden_text: 'chinchillas', href: '#')
end; summary_list.row do |row|
row.key(text: 'Dugong')
row.value(text: 'Dugongs are a species of sea cow')
end; end %>
Output
- Dugong
- Dugongs are a species of sea cow
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Aardvark
</dt>
<dd class="govuk-summary-list__value">
The aardvark is vaguely pig-like in appearance
</dd>
<dd class="govuk-summary-list__actions">
<a class="govuk-link" href="#">
Change <span class="govuk-visually-hidden">
aardvarks
</span>
</a>
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Baboon
</dt>
<dd class="govuk-summary-list__value">
Monkeys of the genus Papio
</dd>
<dd class="govuk-summary-list__actions">
<ul class="govuk-summary-list__actions-list">
<li class="govuk-summary-list__actions-list-item">
<a class="govuk-link" href="#">
Email <span class="govuk-visually-hidden">
baboons
</span>
</a>
</li>
<li class="govuk-summary-list__actions-list-item">
<a class="govuk-link" href="#">
Change <span class="govuk-visually-hidden">
baboons
</span>
</a>
</li>
</ul>
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Chinchilla
</dt>
<dd class="govuk-summary-list__value">
Either of two species of crepuscular rodents
</dd>
<dd class="govuk-summary-list__actions">
<a class="govuk-link" href="#">
Change <span class="govuk-visually-hidden">
chinchillas
</span>
</a>
</dd>
</div>
<div class="govuk-summary-list__row govuk-summary-list__row--no-actions">
<dt class="govuk-summary-list__key">
Dugong
</dt>
<dd class="govuk-summary-list__value">
Dugongs are a species of sea cow
</dd>
</div>
</dl>
Summary lists without actions
When there are no user actions and the summary list is only used to
display static information, the actions column can be hidden entirely
using actions: false
. Doing this makes the values column wider
consuming the remaining space.
Input
= govuk_summary_list(actions: false) do |summary_list|
- summary_list.row do |row|
- row.key { 'Name' }
- row.value { 'Sherlock Holmes' }
- summary_list.row do |row|
- row.key(text: 'Address')
- row.value do
| 221B Baker Street, Westminster, London, NW1 6XE, England
- summary_list.row do |row|
- row.key(text: 'Phone number')
- row.value(text: '020 123 1234')
<%= govuk_summary_list(actions: false) do |summary_list|
summary_list.row do |row|
row.key { 'Name' }
row.value { 'Sherlock Holmes' }
end; summary_list.row do |row|
row.key(text: 'Address')
row.value do %>221B Baker Street, Westminster, London, NW1 6XE, England
<% end; end; summary_list.row do |row|
row.key(text: 'Phone number')
row.value(text: '020 123 1234')
end; end %>
Output
- Name
- Sherlock Holmes
- Address
- 221B Baker Street, Westminster, London, NW1 6XE, England
- Phone number
- 020 123 1234
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Name
</dt>
<dd class="govuk-summary-list__value">
Sherlock Holmes
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Address
</dt>
<dd class="govuk-summary-list__value">
221B Baker Street, Westminster, London, NW1 6XE, England
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Phone number
</dt>
<dd class="govuk-summary-list__value">
020 123 1234
</dd>
</div>
</dl>
Building a summary list directly from data
Summary lists can also be generated by passing an array of hashes to
rows:
.
The format matches the Nunjucks macros except for setting key and
value contents using the html
argument. Use blocks directly for custom
HTML.
Input
= govuk_summary_list(rows: rows)
<%= govuk_summary_list(rows: rows) %>
{
rows: [
{ key: { text: "Name" }, value: { text: "Hercule Poirot" } },
{
key: { text: "Address" },
value: { text: "Flat 203, 56B Whitehaven Mansions, Charterhouse Square, London" },
actions: [{ href: "#", visually_hidden_text: "address" }]
}
]
}
Output
- Name
- Hercule Poirot
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row govuk-summary-list__row--no-actions">
<dt class="govuk-summary-list__key">
Name
</dt>
<dd class="govuk-summary-list__value">
Hercule Poirot
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Address
</dt>
<dd class="govuk-summary-list__value">
Flat 203, 56B Whitehaven Mansions, Charterhouse Square, London
</dd>
<dd class="govuk-summary-list__actions">
<a class="govuk-link" href="#">
Change <span class="govuk-visually-hidden">
address
</span>
</a>
</dd>
</div>
</dl>