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.

= govuk_summary_list do |summary_list|
  - summary_list.with_row do |row|
    - row.with_key { 'Aardvark' }
    - row.with_value { 'The aardvark is vaguely pig-like in appearance' }
    - row.with_action(text: "Change", href: '#', visually_hidden_text: 'aardvarks')

  - summary_list.with_row do |row|
    - row.with_key(text: 'Baboon')
    - row.with_value(text: 'Monkeys of the genus Papio')
    - row.with_action(text: "Email", href: '#', visually_hidden_text: 'baboons')
    - row.with_action(text: "Change", href: '#', visually_hidden_text: 'baboons')

  - summary_list.with_row do |row|
    - row.with_key(text: 'Chinchilla')
    - row.with_value(text: 'Either of two species of crepuscular rodents')
    - row.with_action(text: 'Change', visually_hidden_text: 'chinchillas', href: '#')

  - summary_list.with_row do |row|
    - row.with_key(text: 'Dugong')
    - row.with_value(text: 'Dugongs are a species of sea cow')

<%= govuk_summary_list do |summary_list|
summary_list.with_row do |row|
row.with_key { 'Aardvark' }
row.with_value { 'The aardvark is vaguely pig-like in appearance' }
row.with_action(text: "Change", href: '#', visually_hidden_text: 'aardvarks')

end; summary_list.with_row do |row|
row.with_key(text: 'Baboon')
row.with_value(text: 'Monkeys of the genus Papio')
row.with_action(text: "Email", href: '#', visually_hidden_text: 'baboons')
row.with_action(text: "Change", href: '#', visually_hidden_text: 'baboons')

end; summary_list.with_row do |row|
row.with_key(text: 'Chinchilla')
row.with_value(text: 'Either of two species of crepuscular rodents')
row.with_action(text: 'Change', visually_hidden_text: 'chinchillas', href: '#')

end; summary_list.with_row do |row|
row.with_key(text: 'Dugong')
row.with_value(text: 'Dugongs are a species of sea cow')
end; end %>

Output

Rendered
HTML

Aardvark: The aardvark is vaguely pig-like in appearance; Change aardvarks
Baboon: Monkeys of the genus Papio; Email baboons

Change baboons
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

Slim
ERB

= govuk_summary_list(actions: false) do |summary_list|
  - summary_list.with_row do |row|
    - row.with_key { 'Name' }
    - row.with_value { 'Sherlock Holmes' }

  - summary_list.with_row do |row|
    - row.with_key(text: 'Address')
    - row.with_value do
      | 221B Baker Street, Westminster, London, NW1 6XE, England

  - summary_list.with_row do |row|
    - row.with_key(text: 'Phone number')
    - row.with_value(text: '020 123 1234')

<%= govuk_summary_list(actions: false) do |summary_list|
summary_list.with_row do |row|
row.with_key { 'Name' }
row.with_value { 'Sherlock Holmes' }

end; summary_list.with_row do |row|
row.with_key(text: 'Address')
row.with_value do %>221B Baker Street, Westminster, London, NW1 6XE, England
<% end; end; summary_list.with_row do |row|
row.with_key(text: 'Phone number')
row.with_value(text: '020 123 1234')
end; end %>

Output

Rendered
HTML

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>

Summary lists with missing information

If a row has missing information, include a link to add the information within the value column instead of as an action.

Input

Slim
ERB

= govuk_summary_list do |summary_list|
  - summary_list.with_row do |row|
    - row.with_key { 'Name' }
    - row.with_value { 'Sherlock Holmes' }
    - row.with_action(text: "Change", href: '#', visually_hidden_text: 'name')

  - summary_list.with_row do |row|
    - row.with_key(text: 'Address')
    - row.with_value { govuk_link_to("Enter address", "#") }

  - summary_list.with_row do |row|
    - row.with_key(text: 'Phone number')
    - row.with_value(text: '020 123 1234')
    - row.with_action(text: "Change", href: '#', visually_hidden_text: 'phone number')

<%= govuk_summary_list do |summary_list|
summary_list.with_row do |row|
row.with_key { 'Name' }
row.with_value { 'Sherlock Holmes' }
row.with_action(text: "Change", href: '#', visually_hidden_text: 'name')

end; summary_list.with_row do |row|
row.with_key(text: 'Address')
row.with_value { govuk_link_to("Enter address", "#") }

end; summary_list.with_row do |row|
row.with_key(text: 'Phone number')
row.with_value(text: '020 123 1234')
row.with_action(text: "Change", href: '#', visually_hidden_text: 'phone number')
end; end %>

Output

Rendered
HTML

Name: Sherlock Holmes; Change name
Address: Enter address
Phone number: 020 123 1234; Change phone number

<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>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">
        Change<span class="govuk-visually-hidden">
          name
        </span>
      </a>
    </dd>
  </div>
  <div class="govuk-summary-list__row govuk-summary-list__row--no-actions">
    <dt class="govuk-summary-list__key">
      Address
    </dt>
    <dd class="govuk-summary-list__value">
      <a class="govuk-link" href="#">
        Enter address
      </a>
    </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>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">
        Change<span class="govuk-visually-hidden">
          phone number
        </span>
      </a>
    </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

Slim
ERB
Data

= 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

Rendered
HTML

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>

Summary cards

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

Input

Slim
ERB
Data

= govuk_summary_card(title: "Araquanid") do |card|
  - card.with_action { govuk_link_to("Status", "#") }
  - card.with_action { govuk_link_to("Choose", "#") }
  - card.with_summary_list(rows: araquanid_data)

= govuk_summary_list(card: { title: "Emboar", actions: emboar_actions }, rows: emboar_data)

<%= govuk_summary_card(title: "Araquanid") do |card|
card.with_action { govuk_link_to("Status", "#") }
card.with_action { govuk_link_to("Choose", "#") }
card.with_summary_list(rows: araquanid_data)

end %>
<%= govuk_summary_list(card: { title: "Emboar", actions: emboar_actions }, rows: emboar_data) %>

{
  araquanid_data: [
    { key: { text: "Type" }, value: { text: "💧 Water" } },
    {
      key: { text: "Description" },
      value: { text: "Araquanid is an arachnoid Pokémon with a water bubble around its head." },
      actions: [{ href: "#", visually_hidden_text: "Araquanid's description" }],
    },
    {
      key: { text: "Attack" },
      value: { text: "70" },
      actions: [{ href: "#", visually_hidden_text: "Araquanid's attack statistics" }],
    },
    {
      key: { text: "Defence" },
      value: { text: "92" },
      actions: [{ href: "#", visually_hidden_text: "Araquanid's defence statistics" }],
    },
    {
      key: { text: "Speed" },
      value: { text: "42" },
      actions: [{ href: "#", visually_hidden_text: "Araquanid's speed" }],
    }
  ],
  emboar_actions: [
    govuk_link_to("Status", "#"),
    govuk_link_to("Choose", "#")
  ],
  emboar_data: [
    { key: { text: "Type" }, value: { text: "🔥 Fire" } },
    {
      key: { text: "Description" },
      value: { text: "Emboar is a bulky, bipedal Pokémon with pig-like features." },
      actions: [{ href: "#", visually_hidden_text: "Emboar's description" }],
    },
    {
      key: { text: "Attack" },
      value: { text: "123" },
      actions: [{ href: "#", visually_hidden_text: "Emboar's attack statistics" }],
    },
    {
      key: { text: "Defence" },
      value: { text: "65" },
      actions: [{ href: "#", visually_hidden_text: "Emboar's defence statistics" }],
    },
    {
      key: { text: "Speed" },
      value: { text: "65" },
      actions: [{ href: "#", visually_hidden_text: "Emboar's speed" }],
    }
  ]
}

Output

Rendered
HTML

Araquanid

Status (Araquanid)
Choose (Araquanid)

Type: 💧 Water
Description: Araquanid is an arachnoid Pokémon with a water bubble around its head.; Change Araquanid’s description
Attack: 70; Change Araquanid’s attack statistics
Defence: 92; Change Araquanid’s defence statistics
Speed: 42; Change Araquanid’s speed

Emboar

Status (Emboar)
Choose (Emboar)

Type: 🔥 Fire
Description: Emboar is a bulky, bipedal Pokémon with pig-like features.; Change Emboar’s description (Emboar)
Attack: 123; Change Emboar’s attack statistics (Emboar)
Defence: 65; Change Emboar’s defence statistics (Emboar)
Speed: 65; Change Emboar’s speed (Emboar)

<div class="govuk-summary-card">
  <div class="govuk-summary-card__title-wrapper">
    <h2 class="govuk-summary-card__title">
      Araquanid
    </h2>
    <ul class="govuk-summary-card__actions">
      <li class="govuk-summary-card__action">
        <a class="govuk-link" href="#">
          Status
        </a>
        <span class="govuk-visually-hidden">
          (Araquanid)
        </span>
      </li>
      <li class="govuk-summary-card__action">
        <a class="govuk-link" href="#">
          Choose
        </a>
        <span class="govuk-visually-hidden">
          (Araquanid)
        </span>
      </li>
    </ul>
  </div>
  <div class="govuk-summary-card__content">
    <dl class="govuk-summary-list">
      <div class="govuk-summary-list__row govuk-summary-list__row--no-actions">
        <dt class="govuk-summary-list__key">
          Type
        </dt>
        <dd class="govuk-summary-list__value">
          💧 Water
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Description
        </dt>
        <dd class="govuk-summary-list__value">
          Araquanid is an arachnoid Pokémon with a water bubble around its head.
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Change<span class="govuk-visually-hidden">
              Araquanid's description
            </span>
          </a>
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Attack
        </dt>
        <dd class="govuk-summary-list__value">
          70
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Change<span class="govuk-visually-hidden">
              Araquanid's attack statistics
            </span>
          </a>
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Defence
        </dt>
        <dd class="govuk-summary-list__value">
          92
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Change<span class="govuk-visually-hidden">
              Araquanid's defence statistics
            </span>
          </a>
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Speed
        </dt>
        <dd class="govuk-summary-list__value">
          42
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Change<span class="govuk-visually-hidden">
              Araquanid's speed
            </span>
          </a>
        </dd>
      </div>
    </dl>
  </div>
</div>
<div class="govuk-summary-card">
  <div class="govuk-summary-card__title-wrapper">
    <h2 class="govuk-summary-card__title">
      Emboar
    </h2>
    <ul class="govuk-summary-card__actions">
      <li class="govuk-summary-card__action">
        <a class="govuk-link" href="#">
          Status
        </a>
        <span class="govuk-visually-hidden">
          (Emboar)
        </span>
      </li>
      <li class="govuk-summary-card__action">
        <a class="govuk-link" href="#">
          Choose
        </a>
        <span class="govuk-visually-hidden">
          (Emboar)
        </span>
      </li>
    </ul>
  </div>
  <div class="govuk-summary-card__content">
    <dl class="govuk-summary-list">
      <div class="govuk-summary-list__row govuk-summary-list__row--no-actions">
        <dt class="govuk-summary-list__key">
          Type
        </dt>
        <dd class="govuk-summary-list__value">
          🔥 Fire
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Description
        </dt>
        <dd class="govuk-summary-list__value">
          Emboar is a bulky, bipedal Pokémon with pig-like features.
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Change<span class="govuk-visually-hidden">
              Emboar's description (Emboar)
            </span>
          </a>
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Attack
        </dt>
        <dd class="govuk-summary-list__value">
          123
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Change<span class="govuk-visually-hidden">
              Emboar's attack statistics (Emboar)
            </span>
          </a>
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Defence
        </dt>
        <dd class="govuk-summary-list__value">
          65
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Change<span class="govuk-visually-hidden">
              Emboar's defence statistics (Emboar)
            </span>
          </a>
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Speed
        </dt>
        <dd class="govuk-summary-list__value">
          65
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Change<span class="govuk-visually-hidden">
              Emboar's speed (Emboar)
            </span>
          </a>
        </dd>
      </div>
    </dl>
  </div>
</div>

Arbitrary HTML content can be passed into the govuk_summary_card block and it will render in the place of a summary list.