Skip to main content
  1. Home
  2. Summary list

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

Aardvark
The aardvark is vaguely pig-like in appearance
Change aardvarks
Baboon
Monkeys of the genus Papio
Chinchilla
Either of two species of crepuscular rodents
Change chinchillas
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
Address
Flat 203, 56B Whitehaven Mansions, Charterhouse Square, London
Change address 
<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>

Related information