Components

Summary list

Use the summary list to summarise information, for example, a user’s responses at the end of a form.

Open this summary list example in a new tab
HTML
<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">
      Sarah Philips
    </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">
    <dt class="govuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="govuk-summary-list__value">
      5 January 1978
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">
        Change<span class="govuk-visually-hidden"> date of birth</span>
      </a>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Address
    </dt>
    <dd class="govuk-summary-list__value">
      72 Guild Street<br>London<br>SE23 6FH
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">
        Change<span class="govuk-visually-hidden"> address</span>
      </a>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Contact details
    </dt>
    <dd class="govuk-summary-list__value">
      <p class="govuk-body">07700 900457</p>
      <p class="govuk-body">sarah.phillips@example.com</p>
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">
        Change<span class="govuk-visually-hidden"> contact details</span>
      </a>
    </dd>
  </div>
</dl>
Nunjucks
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
rows array Required. Array of row item objects. See rows.
classes string Classes to add to the container.
attributes object HTML attributes (for example data attributes) to add to the container.
Options for rows
Name Type Description
classes string Classes to add to the row div.
key.text string Required. If html is set, this is not required. Text to use within the each key. If html is provided, the text option will be ignored.
key.html string Required.
key.classes string Classes to add to the key wrapper.
value.text string Required. If html is set, this is not required. Text to use within the each value. If html is provided, the text option will be ignored.
value.html string Required. If text is set, this is not required. HTML to use within the each value. If html is provided, the text option will be ignored.
value.classes string Classes to add to the value wrapper.
actions.classes string Classes to add to the actions wrapper.
actions.items array Array of action item objects. See actions.items.
Options for actions.items
Name Type Description
href string Required. The value of the link's href attribute for an action item.
text string Required. If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the each action item. If html is provided, the text option will be ignored.
visuallyHiddenText string Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios.
classes string Classes to add to the action item.
attributes object HTML attributes (for example data attributes) to add to the action item. 
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

{{ govukSummaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Sarah Philips"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "name"
          }
        ]
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "5 January 1978"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "date of birth"
          }
        ]
      }
    },
    {
      key: {
        text: "Address"
      },
      value: {
        html: "72 Guild Street<br>London<br>SE23 6FH"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "address"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact details"
      },
      value: {
        html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "contact details"
          }
        ]
      }
    }
  ]
}) }}

When to use this component

Use the summary list component to present pairs of related information, known as key-value pairs, in a list. The key is a description or label of a piece of information, like ‘Name’, and the value is the piece of information itself, like ‘John Smith’.

You can use it to display metadata like ‘Last updated’ with a date like ‘22 June 2018’, or to summarise a user’s responses at the end of a form like the check answers pattern.

When not to use this component

The summary list uses the description list (<dl>) HTML element, so only use it to present information that has a key and at least one value.

Do not use it for tabular data or a simple list of information or tasks, like a task list. For those use a <table>, <ul> or <ol>.

How it works

There are 2 ways to use the summary list component. You can use HTML or, if you’re using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.

Open this without actions – summary list example in a new tab
HTML
<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">
      Sarah Philips
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="govuk-summary-list__value">
      5 January 1978
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Address
    </dt>
    <dd class="govuk-summary-list__value">
      72 Guild Street<br>London<br>SE23 6FH
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Contact details
    </dt>
    <dd class="govuk-summary-list__value">
      <p class="govuk-body">07700 900457</p>
      <p class="govuk-body">sarah.phillips@example.com</p>
    </dd>
  </div>
</dl>
Nunjucks
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
rows array Required. Array of row item objects. See rows.
classes string Classes to add to the container.
attributes object HTML attributes (for example data attributes) to add to the container.
Options for rows
Name Type Description
classes string Classes to add to the row div.
key.text string Required. If html is set, this is not required. Text to use within the each key. If html is provided, the text option will be ignored.
key.html string Required.
key.classes string Classes to add to the key wrapper.
value.text string Required. If html is set, this is not required. Text to use within the each value. If html is provided, the text option will be ignored.
value.html string Required. If text is set, this is not required. HTML to use within the each value. If html is provided, the text option will be ignored.
value.classes string Classes to add to the value wrapper.
actions.classes string Classes to add to the actions wrapper.
actions.items array Array of action item objects. See actions.items.
Options for actions.items
Name Type Description
href string Required. The value of the link's href attribute for an action item.
text string Required. If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the each action item. If html is provided, the text option will be ignored.
visuallyHiddenText string Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios.
classes string Classes to add to the action item.
attributes object HTML attributes (for example data attributes) to add to the action item. 
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

{{ govukSummaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Sarah Philips"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "5 January 1978"
      }
    },
    {
      key: {
        text: "Address"
      },
      value: {
        html: "72 Guild Street<br>London<br>SE23 6FH"
      }
    },
    {
      key: {
        text: "Contact details"
      },
      value: {
        html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
      }
    }
  ]
}) }}

Adding actions to each row

You can add actions to a summary list, like a ‘Change’ link to let users go back and edit their answer.

For sighted users, the actions get their context from the other content in the row they appear in.

Assistive technology users, like those who use a screen reader, may hear the 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’.

Open this summary list second example in a new tab
HTML
<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">
      Sarah Philips
    </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">
    <dt class="govuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="govuk-summary-list__value">
      5 January 1978
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">
        Change<span class="govuk-visually-hidden"> date of birth</span>
      </a>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Address
    </dt>
    <dd class="govuk-summary-list__value">
      72 Guild Street<br>London<br>SE23 6FH
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">
        Change<span class="govuk-visually-hidden"> address</span>
      </a>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Contact details
    </dt>
    <dd class="govuk-summary-list__value">
      <p class="govuk-body">07700 900457</p>
      <p class="govuk-body">sarah.phillips@example.com</p>
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">
        Change<span class="govuk-visually-hidden"> contact details</span>
      </a>
    </dd>
  </div>
</dl>
Nunjucks
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
rows array Required. Array of row item objects. See rows.
classes string Classes to add to the container.
attributes object HTML attributes (for example data attributes) to add to the container.
Options for rows
Name Type Description
classes string Classes to add to the row div.
key.text string Required. If html is set, this is not required. Text to use within the each key. If html is provided, the text option will be ignored.
key.html string Required.
key.classes string Classes to add to the key wrapper.
value.text string Required. If html is set, this is not required. Text to use within the each value. If html is provided, the text option will be ignored.
value.html string Required. If text is set, this is not required. HTML to use within the each value. If html is provided, the text option will be ignored.
value.classes string Classes to add to the value wrapper.
actions.classes string Classes to add to the actions wrapper.
actions.items array Array of action item objects. See actions.items.
Options for actions.items
Name Type Description
href string Required. The value of the link's href attribute for an action item.
text string Required. If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the each action item. If html is provided, the text option will be ignored.
visuallyHiddenText string Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios.
classes string Classes to add to the action item.
attributes object HTML attributes (for example data attributes) to add to the action item. 
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

{{ govukSummaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Sarah Philips"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "name"
          }
        ]
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "5 January 1978"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "date of birth"
          }
        ]
      }
    },
    {
      key: {
        text: "Address"
      },
      value: {
        html: "72 Guild Street<br>London<br>SE23 6FH"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "address"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact details"
      },
      value: {
        html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "contact details"
          }
        ]
      }
    }
  ]
}) }}

If you have a mix of rows with and without actions, add the govuk-summary-list__row--no-actions modifier class to the rows without actions.

Open this summary list with a mix of rows with and without actions example in a new tab
HTML
<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">
      Sarah Philips
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="govuk-summary-list__value">
      5 January 1978
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">
        Change<span class="govuk-visually-hidden"> date of birth</span>
      </a>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Address
    </dt>
    <dd class="govuk-summary-list__value">
      72 Guild Street<br>London<br>SE23 6FH
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">
        Change<span class="govuk-visually-hidden"> address</span>
      </a>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Contact details
    </dt>
    <dd class="govuk-summary-list__value">
      <p class="govuk-body">07700 900457</p>
      <p class="govuk-body">sarah.phillips@example.com</p>
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">
        Change<span class="govuk-visually-hidden"> contact details</span>
      </a>
    </dd>
  </div>
</dl>
Nunjucks
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
rows array Required. Array of row item objects. See rows.
classes string Classes to add to the container.
attributes object HTML attributes (for example data attributes) to add to the container.
Options for rows
Name Type Description
classes string Classes to add to the row div.
key.text string Required. If html is set, this is not required. Text to use within the each key. If html is provided, the text option will be ignored.
key.html string Required.
key.classes string Classes to add to the key wrapper.
value.text string Required. If html is set, this is not required. Text to use within the each value. If html is provided, the text option will be ignored.
value.html string Required. If text is set, this is not required. HTML to use within the each value. If html is provided, the text option will be ignored.
value.classes string Classes to add to the value wrapper.
actions.classes string Classes to add to the actions wrapper.
actions.items array Array of action item objects. See actions.items.
Options for actions.items
Name Type Description
href string Required. The value of the link's href attribute for an action item.
text string Required. If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the each action item. If html is provided, the text option will be ignored.
visuallyHiddenText string Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios.
classes string Classes to add to the action item.
attributes object HTML attributes (for example data attributes) to add to the action item. 
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

{{ govukSummaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Sarah Philips"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "5 January 1978"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "date of birth"
          }
        ]
      }
    },
    {
      key: {
        text: "Address"
      },
      value: {
        html: "72 Guild Street<br>London<br>SE23 6FH"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "address"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact details"
      },
      value: {
        html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "contact details"
          }
        ]
      }
    }
  ]
}) }}

Removing the borders

The summary list includes some separating borders to help users read each row and its action.

If your summary list does not have any actions, you can choose to remove the separating borders with the govuk-summary-list--no-border class.

Open this without borders – summary list example in a new tab
HTML
<dl class="govuk-summary-list govuk-summary-list--no-border">
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Name
    </dt>
    <dd class="govuk-summary-list__value">
      Sarah Philips
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="govuk-summary-list__value">
      5 January 1978
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Address
    </dt>
    <dd class="govuk-summary-list__value">
      72 Guild Street<br>London<br>SE23 6FH
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Contact details
    </dt>
    <dd class="govuk-summary-list__value">
      <p class="govuk-body">07700 900457</p>
      <p class="govuk-body">sarah.phillips@example.com</p>
    </dd>
  </div>
</dl>
Nunjucks
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
rows array Required. Array of row item objects. See rows.
classes string Classes to add to the container.
attributes object HTML attributes (for example data attributes) to add to the container.
Options for rows
Name Type Description
classes string Classes to add to the row div.
key.text string Required. If html is set, this is not required. Text to use within the each key. If html is provided, the text option will be ignored.
key.html string Required.
key.classes string Classes to add to the key wrapper.
value.text string Required. If html is set, this is not required. Text to use within the each value. If html is provided, the text option will be ignored.
value.html string Required. If text is set, this is not required. HTML to use within the each value. If html is provided, the text option will be ignored.
value.classes string Classes to add to the value wrapper.
actions.classes string Classes to add to the actions wrapper.
actions.items array Array of action item objects. See actions.items.
Options for actions.items
Name Type Description
href string Required. The value of the link's href attribute for an action item.
text string Required. If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the each action item. If html is provided, the text option will be ignored.
visuallyHiddenText string Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios.
classes string Classes to add to the action item.
attributes object HTML attributes (for example data attributes) to add to the action item. 
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

{{ govukSummaryList({
  classes: 'govuk-summary-list--no-border',
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Sarah Philips"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "5 January 1978"
      }
    },
    {
      key: {
        text: "Address"
      },
      value: {
        html: "72 Guild Street<br>London<br>SE23 6FH"
      }
    },
    {
      key: {
        text: "Contact details"
      },
      value: {
        html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
      }
    }
  ]
}) }}

To remove borders on a single row, use the govuk-summary-list__row--no-border class.

Research on this component

This component was developed and tested by the Government Digital Services as part of the check answers pattern.

Next steps

More research is needed to find out how well this component works outside the check answers pattern, for example, to present summaries within caseworking systems.

If you use this component in your service, get in touch to share your research findings.

Help improve this component

To help make sure that this page is useful, relevant and up to date, you can:

Need help?

If you’ve got a question about the GOV.UK Design System, contact the team.