guide/content/components/summary-list.slim
---
title: Summary list
---
p
| Use the summary list to summarise information, such as a user’s
responses at the end of a form.
== render('/partials/example.*',
caption: "A summary list with various entries",
code: summary_list_normal) do
markdown:
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.
== render('/partials/example.*',
caption: "Summary lists without actions",
code: summary_list_without_actions) do
markdown:
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.
== render('/partials/example.*',
caption: "Summary lists with missing information",
code: summary_list_with_missing_information) do
markdown:
If a row has missing information, include a link to add the information within the value column instead of as an action.
== render('/partials/example.*',
caption: "Building a summary list directly from data",
code: summary_list_from_rows,
data: summary_list_from_rows_data) do
markdown:
Summary lists can also be generated by passing an array of hashes to
`rows:`.
The format matches the [Nunjucks macros][0] except for setting key and
value contents using the `html` argument. Use blocks directly for custom
HTML.
[0]: https://design-system.service.gov.uk/components/summary-list/
== render('/partials/example.*',
caption: "Summary cards",
code: summary_list_card,
data: summary_list_card_data) do
markdown:
If you’re showing multiple summary lists on a page, you can show each list
within a summary card. This lets you visually separate each summary list
and give each a title and some actions.
Use summary cards when you need to show:
* multiple summary lists that all describe the same type of thing, such as people
* actions that will apply to all the items in a list
markdown:
Arbitrary HTML content can be passed into the `govuk_summary_card` block and it will
render in the place of a summary list.
== render('/partials/related-navigation.*', links: summary_list_info)