Content presentation - Summary list

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

WCAG 2.2

WCAG 2.2 affects this component

Make sure that users can successfully:

interact with row actions
change information they've previously given in an answer

See the full list of design system changes to meet WCAG 2.2.

<dl class="nhsuk-summary-list">
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Name
    </dt>
    <dd class="nhsuk-summary-list__value">
      Karen Francis
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <a href="#">
        Change<span class="nhsuk-u-visually-hidden"> name</span>
      </a>
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="nhsuk-summary-list__value">
      15 March 1984
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <a href="#">
        Change<span class="nhsuk-u-visually-hidden"> date of birth</span>
      </a>
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Contact information
    </dt>
    <dd class="nhsuk-summary-list__value">
      73 Roman Rd<br>Leeds<br> LS2 5ZN
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <a href="#">
        Change<span class="nhsuk-u-visually-hidden"> contact information</span>
      </a>
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Contact details
    </dt>
    <dd class="nhsuk-summary-list__value">
      <p>07700 900362</p>
      <p>karen.francis@example.com</p>
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <a href="#">
        Change<span class="nhsuk-u-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.

Nunjucks arguments for default summary list
Name	Type	Required	Description
rows	array	true	Array of row item objects.
rows[].classes	string	false	Classes to add to the row `div`.
rows[].key.text	string	true	If `html` is set, this is not required. Text to use within the each key. If `html` is provided, the `text` argument will be ignored.
rows[].key.html	string	true
rows[].key.classes	string	false	Classes to add to the key wrapper.
rows[].value.text	string	true	If `html` is set, this is not required. Text to use within the each value. If `html` is provided, the `text` argument will be ignored.
rows[].value.html	string	true	If `text` is set, this is not required. HTML to use within the each value. If `html` is provided, the `text` argument will be ignored.
rows[].value.classes	string	false	Classes to add to the value wrapper.
rows[].actions.classes	string	false	Classes to add to the actions wrapper.
rows[].actions.items	array	false	Array of action item objects.
rows[].actions.items[].href	string	true	The value of the link href attribute for an action item.
rows[].actions.items[].text	string	true	If `html` is set, this is not required. Text to use within each action item. If `html` is provided, the `text` argument will be ignored.
rows[].actions.items[].html	string	true	If `text` is set, this is not required. HTML to use within the each action item. If `html` is provided, the `text` argument will be ignored.
rows[].actions.items[].visuallyHiddenText	string	false	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	false	Classes to add to the summary list container.
attributes	object	false	HTML attributes (for example data attributes) to add to the summary list container.

{% from "summary-list/macro.njk" import summaryList %}

{{ summaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "name"
          }
        ]
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "15 March 1984"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "date of birth"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact information"
      },
      value: {
        html: "73 Roman Rd<br>Leeds<br> LS2 5ZN"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "contact information"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact details"
      },
      value: {
        html: '<p>07700 900362</p><p>karen.francis@example.com</p>'
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "contact details"
          }
        ]
      }
    }
  ]
}) }}

When to use summary lists

Use the summary list component to present pairs of related information, known as key-value pairs, in a list, where:

the key is a label, like "Name"
the value is the piece of information itself, like "John Smith"

Think about how you can use the summary list along with other components or patterns to give users a sense of control. You can use it to summarise a user's responses at the end of a form, for example as part of the check answers pattern.

When not to use summary lists

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

Do not use it for tabular data or a simple list of information or tasks, like a task list page. (See the complete multiple tasks pattern.) For those, use a <table>, <ul> or <ol>.

How to use summary lists

There are 2 ways to use the summary list component. You can use HTML or, if you're using Nunjucks or the NHS.UK prototype kit, you can use the Nunjucks macro.

Open this example in a new tab

HTML

<dl class="nhsuk-summary-list">
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Name
    </dt>
    <dd class="nhsuk-summary-list__value">
      Karen Francis
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <a href="#">
        Change<span class="nhsuk-u-visually-hidden"> name</span>
      </a>
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="nhsuk-summary-list__value">
      15 March 1984
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <a href="#">
        Change<span class="nhsuk-u-visually-hidden"> date of birth</span>
      </a>
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Contact information
    </dt>
    <dd class="nhsuk-summary-list__value">
      73 Roman Rd<br>Leeds<br> LS2 5ZN
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <a href="#">
        Change<span class="nhsuk-u-visually-hidden"> contact information</span>
      </a>
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Contact details
    </dt>
    <dd class="nhsuk-summary-list__value">
      <p>07700 900362</p>
      <p>karen.francis@example.com</p>
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <a href="#">
        Change<span class="nhsuk-u-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.

Nunjucks arguments for default summary list
Name	Type	Required	Description
rows	array	true	Array of row item objects.
rows[].classes	string	false	Classes to add to the row `div`.
rows[].key.text	string	true	If `html` is set, this is not required. Text to use within the each key. If `html` is provided, the `text` argument will be ignored.
rows[].key.html	string	true
rows[].key.classes	string	false	Classes to add to the key wrapper.
rows[].value.text	string	true	If `html` is set, this is not required. Text to use within the each value. If `html` is provided, the `text` argument will be ignored.
rows[].value.html	string	true	If `text` is set, this is not required. HTML to use within the each value. If `html` is provided, the `text` argument will be ignored.
rows[].value.classes	string	false	Classes to add to the value wrapper.
rows[].actions.classes	string	false	Classes to add to the actions wrapper.
rows[].actions.items	array	false	Array of action item objects.
rows[].actions.items[].href	string	true	The value of the link href attribute for an action item.
rows[].actions.items[].text	string	true	If `html` is set, this is not required. Text to use within each action item. If `html` is provided, the `text` argument will be ignored.
rows[].actions.items[].html	string	true	If `text` is set, this is not required. HTML to use within the each action item. If `html` is provided, the `text` argument will be ignored.
rows[].actions.items[].visuallyHiddenText	string	false	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	false	Classes to add to the summary list container.
attributes	object	false	HTML attributes (for example data attributes) to add to the summary list container.

{% from "summary-list/macro.njk" import summaryList %}

{{ summaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "name"
          }
        ]
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "15 March 1984"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "date of birth"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact information"
      },
      value: {
        html: "73 Roman Rd<br>Leeds<br> LS2 5ZN"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "contact information"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact details"
      },
      value: {
        html: '<p>07700 900362</p><p>karen.francis@example.com</p>'
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "contact details"
          }
        ]
      }
    }
  ]
}) }}

Summary list with actions

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

WCAG 2.2

Make sure any "Change" or other action links are at least 24px by 24px in size, or have adequate spacing. This is to make sure users can easily interact with the links. This is to comply with WCAG 2.2 success criterion 2.5.8 Target Size (W3C).

WCAG 2.2

If a user decides to go back to a previous answer through a link, make sure information they have already entered is pre-populated.

Do not pre-populate if the information is no longer valid, or when pre-populating would be a major safety or security concern. This is to comply with WCAG 2.2 success criterion 3.3.7 Redundant Entry (W3C).

People who use assistive technology, like 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 example in a new tab

HTML

<dl class="nhsuk-summary-list">
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Name
    </dt>
    <dd class="nhsuk-summary-list__value">
      Karen Francis
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <a href="#">
        Change<span class="nhsuk-u-visually-hidden"> name</span>
      </a>
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="nhsuk-summary-list__value">
      15 March 1984
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <a href="#">
        Change<span class="nhsuk-u-visually-hidden"> date of birth</span>
      </a>
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Contact information
    </dt>
    <dd class="nhsuk-summary-list__value">
      73 Roman Rd<br>Leeds<br> LS2 5ZN
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <a href="#">
        Change<span class="nhsuk-u-visually-hidden"> contact information</span>
      </a>
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Contact details
    </dt>
    <dd class="nhsuk-summary-list__value">
      <p>07700 900362</p>
      <p>karen.francis@example.com</p>
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <a href="#">
        Change<span class="nhsuk-u-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.

Nunjucks arguments for default summary list
Name	Type	Required	Description
rows	array	true	Array of row item objects.
rows[].classes	string	false	Classes to add to the row `div`.
rows[].key.text	string	true	If `html` is set, this is not required. Text to use within the each key. If `html` is provided, the `text` argument will be ignored.
rows[].key.html	string	true
rows[].key.classes	string	false	Classes to add to the key wrapper.
rows[].value.text	string	true	If `html` is set, this is not required. Text to use within the each value. If `html` is provided, the `text` argument will be ignored.
rows[].value.html	string	true	If `text` is set, this is not required. HTML to use within the each value. If `html` is provided, the `text` argument will be ignored.
rows[].value.classes	string	false	Classes to add to the value wrapper.
rows[].actions.classes	string	false	Classes to add to the actions wrapper.
rows[].actions.items	array	false	Array of action item objects.
rows[].actions.items[].href	string	true	The value of the link href attribute for an action item.
rows[].actions.items[].text	string	true	If `html` is set, this is not required. Text to use within each action item. If `html` is provided, the `text` argument will be ignored.
rows[].actions.items[].html	string	true	If `text` is set, this is not required. HTML to use within the each action item. If `html` is provided, the `text` argument will be ignored.
rows[].actions.items[].visuallyHiddenText	string	false	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	false	Classes to add to the summary list container.
attributes	object	false	HTML attributes (for example data attributes) to add to the summary list container.

{% from "summary-list/macro.njk" import summaryList %}

{{ summaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "name"
          }
        ]
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "15 March 1984"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "date of birth"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact information"
      },
      value: {
        html: "73 Roman Rd<br>Leeds<br> LS2 5ZN"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "contact information"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact details"
      },
      value: {
        html: '<p>07700 900362</p><p>karen.francis@example.com</p>'
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "contact details"
          }
        ]
      }
    }
  ]
}) }}

Summary list without actions

Open this example in a new tab

HTML

<dl class="nhsuk-summary-list">
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Name
    </dt>
    <dd class="nhsuk-summary-list__value">
      Karen Francis
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="nhsuk-summary-list__value">
      15 March 1984
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Contact information
    </dt>
    <dd class="nhsuk-summary-list__value">
      73 Roman Rd<br>Leeds<br> LS2 5ZN
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Contact details
    </dt>
    <dd class="nhsuk-summary-list__value">
      <p>07700 900362</p>
      <p>karen.francis@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.

Nunjucks arguments for without action summary list
Name	Type	Required	Description
rows	array	true	Array of row item objects.
rows[].classes	string	false	Classes to add to the row `div`.
rows[].key.text	string	true	If `html` is set, this is not required. Text to use within the each key. If `html` is provided, the `text` argument will be ignored.
rows[].key.html	string	true
rows[].key.classes	string	false	Classes to add to the key wrapper.
rows[].value.text	string	true	If `html` is set, this is not required. Text to use within the each value. If `html` is provided, the `text` argument will be ignored.
rows[].value.html	string	true	If `text` is set, this is not required. HTML to use within the each value. If `html` is provided, the `text` argument will be ignored.
rows[].value.classes	string	false	Classes to add to the value wrapper.
rows[].actions.classes	string	false	Classes to add to the actions wrapper.
rows[].actions.items	array	false	Array of action item objects.
rows[].actions.items[].href	string	true	The value of the link href attribute for an action item.
rows[].actions.items[].text	string	true	If `html` is set, this is not required. Text to use within each action item. If `html` is provided, the `text` argument will be ignored.
rows[].actions.items[].html	string	true	If `text` is set, this is not required. HTML to use within the each action item. If `html` is provided, the `text` argument will be ignored.
rows[].actions.items[].visuallyHiddenText	string	false	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	false	Classes to add to the summary list container.
attributes	object	false	HTML attributes (for example data attributes) to add to the summary list container.

{% from "summary-list/macro.njk" import summaryList %}

{{ summaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "15 March 1984"
      }
    },
    {
      key: {
        text: "Contact information"
      },
      value: {
        html: "73 Roman Rd<br>Leeds<br> LS2 5ZN"
      }
    },
    {
      key: {
        text: "Contact details"
      },
      value: {
        html: '<p>07700 900362</p><p>karen.francis@example.com</p>'
      }
    }
  ]
}) }}

Summary list without actions or borders

If you do not include actions in your summary list and it would be better for your design to remove the separating borders, use the nhsuk-summary-list--no-border class.

Open this example in a new tab

HTML

<dl class="nhsuk-summary-list nhsuk-summary-list--no-border">
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Name
    </dt>
    <dd class="nhsuk-summary-list__value">
      Karen Francis
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="nhsuk-summary-list__value">
      15 March 1984
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Contact information
    </dt>
    <dd class="nhsuk-summary-list__value">
      73 Roman Rd<br>Leeds<br> LS2 5ZN
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Contact details
    </dt>
    <dd class="nhsuk-summary-list__value">
      <p>07700 900362</p>
      <p>karen.francis@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.

Nunjucks arguments for without border summary list
Name	Type	Required	Description
rows	array	true	Array of row item objects.
rows[].classes	string	false	Classes to add to the row `div`.
rows[].key.text	string	true	If `html` is set, this is not required. Text to use within the each key. If `html` is provided, the `text` argument will be ignored.
rows[].key.html	string	true
rows[].key.classes	string	false	Classes to add to the key wrapper.
rows[].value.text	string	true	If `html` is set, this is not required. Text to use within the each value. If `html` is provided, the `text` argument will be ignored.
rows[].value.html	string	true	If `text` is set, this is not required. HTML to use within the each value. If `html` is provided, the `text` argument will be ignored.
rows[].value.classes	string	false	Classes to add to the value wrapper.
rows[].actions.classes	string	false	Classes to add to the actions wrapper.
rows[].actions.items	array	false	Array of action item objects.
rows[].actions.items[].href	string	true	The value of the link href attribute for an action item.
rows[].actions.items[].text	string	true	If `html` is set, this is not required. Text to use within each action item. If `html` is provided, the `text` argument will be ignored.
rows[].actions.items[].html	string	true	If `text` is set, this is not required. HTML to use within the each action item. If `html` is provided, the `text` argument will be ignored.
rows[].actions.items[].visuallyHiddenText	string	false	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	false	Classes to add to the summary list container.
attributes	object	false	HTML attributes (for example data attributes) to add to the summary list container.

{% from "summary-list/macro.njk" import summaryList %}

{{ summaryList({
  classes: 'nhsuk-summary-list--no-border',
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "15 March 1984"
      }
    },
    {
      key: {
        text: "Contact information"
      },
      value: {
        html: "73 Roman Rd<br>Leeds<br> LS2 5ZN"
      }
    },
    {
      key: {
        text: "Contact details"
      },
      value: {
        html: '<p>07700 900362</p><p>karen.francis@example.com</p>'
      }
    }
  ]
}) }}

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

Help us improve this guidance

Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.

Feedback or share insights on GitHub

Read more about how to feedback or share insights.

If you have any questions, get in touch with the service manual team.

Updated: July 2025