Skip to main content

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: Make sure that users can successfully interact with row actions and change information they've previously given in an answer.

Open this example in a new tab: summary list 
<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 class="nhsuk-link" 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 class="nhsuk-link" 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 class="nhsuk-link" 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 class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> contact details</span></a>
    </dd>
  </div>
</dl>
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
id string The ID of the summary list.
rows array Required. The rows within the summary list component. See macro options for rows.
card object Can be used to wrap a card around the summary list component. If any of these options are present, a card will wrap around the summary list. See macro options for card.
classes string Classes to add to the container.
attributes object HTML attributes (for example data attributes) to add to the container.
Options for rows array objects
Name Type Description
classes string Classes to add to the row div.
key object Required. The reference content (key) for each row item in the summary list component. See macro options for rows key.
value object Required. The value for each row item in the summary list component. See macro options for rows value.
actions object The action link content for each row item in the summary list component. See macro options for rows actions.
Options for rows key object
Name Type Description
text string Required. If html is set, this is not required. Text to use within each key. 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 each key. If html is provided, the text option will be ignored.
classes string Classes to add to the key wrapper.
Options for rows value object
Name Type Description
text string Required. If html is set, this is not required. Text to use within each value. 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 each value. If html is provided, the text option will be ignored.
classes string Classes to add to the value wrapper.
Options for rows actions object
Name Type Description
items array The action link items within the row item of the summary list component. See macro options for rows actions items.
classes string Classes to add to the actions wrapper.
Options for rows actions items array objects
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 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 "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

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.

Information: 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).

Information: 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: summary list second 
<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 class="nhsuk-link" 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 class="nhsuk-link" 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 class="nhsuk-link" 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 class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> contact details</span></a>
    </dd>
  </div>
</dl>
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
id string The ID of the summary list.
rows array Required. The rows within the summary list component. See macro options for rows.
card object Can be used to wrap a card around the summary list component. If any of these options are present, a card will wrap around the summary list. See macro options for card.
classes string Classes to add to the container.
attributes object HTML attributes (for example data attributes) to add to the container.
Options for rows array objects
Name Type Description
classes string Classes to add to the row div.
key object Required. The reference content (key) for each row item in the summary list component. See macro options for rows key.
value object Required. The value for each row item in the summary list component. See macro options for rows value.
actions object The action link content for each row item in the summary list component. See macro options for rows actions.
Options for rows key object
Name Type Description
text string Required. If html is set, this is not required. Text to use within each key. 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 each key. If html is provided, the text option will be ignored.
classes string Classes to add to the key wrapper.
Options for rows value object
Name Type Description
text string Required. If html is set, this is not required. Text to use within each value. 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 each value. If html is provided, the text option will be ignored.
classes string Classes to add to the value wrapper.
Options for rows actions object
Name Type Description
items array The action link items within the row item of the summary list component. See macro options for rows actions items.
classes string Classes to add to the actions wrapper.
Options for rows actions items array objects
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 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 "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: summary list without action 
<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 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
id string The ID of the summary list.
rows array Required. The rows within the summary list component. See macro options for rows.
card object Can be used to wrap a card around the summary list component. If any of these options are present, a card will wrap around the summary list. See macro options for card.
classes string Classes to add to the container.
attributes object HTML attributes (for example data attributes) to add to the container.
Options for rows array objects
Name Type Description
classes string Classes to add to the row div.
key object Required. The reference content (key) for each row item in the summary list component. See macro options for rows key.
value object Required. The value for each row item in the summary list component. See macro options for rows value.
actions object The action link content for each row item in the summary list component. See macro options for rows actions.
Options for rows key object
Name Type Description
text string Required. If html is set, this is not required. Text to use within each key. 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 each key. If html is provided, the text option will be ignored.
classes string Classes to add to the key wrapper.
Options for rows value object
Name Type Description
text string Required. If html is set, this is not required. Text to use within each value. 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 each value. If html is provided, the text option will be ignored.
classes string Classes to add to the value wrapper.
Options for rows actions object
Name Type Description
items array The action link items within the row item of the summary list component. See macro options for rows actions items.
classes string Classes to add to the actions wrapper.
Options for rows actions items array objects
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 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 "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: summary list without border 
<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 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
id string The ID of the summary list.
rows array Required. The rows within the summary list component. See macro options for rows.
card object Can be used to wrap a card around the summary list component. If any of these options are present, a card will wrap around the summary list. See macro options for card.
classes string Classes to add to the container.
attributes object HTML attributes (for example data attributes) to add to the container.
Options for rows array objects
Name Type Description
classes string Classes to add to the row div.
key object Required. The reference content (key) for each row item in the summary list component. See macro options for rows key.
value object Required. The value for each row item in the summary list component. See macro options for rows value.
actions object The action link content for each row item in the summary list component. See macro options for rows actions.
Options for rows key object
Name Type Description
text string Required. If html is set, this is not required. Text to use within each key. 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 each key. If html is provided, the text option will be ignored.
classes string Classes to add to the key wrapper.
Options for rows value object
Name Type Description
text string Required. If html is set, this is not required. Text to use within each value. 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 each value. If html is provided, the text option will be ignored.
classes string Classes to add to the value wrapper.
Options for rows actions object
Name Type Description
items array The action link items within the row item of the summary list component. See macro options for rows actions items.
classes string Classes to add to the actions wrapper.
Options for rows actions items array objects
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 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 "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.

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

Summary cards are often used in case working systems to help users quickly view a set of information and related actions.

Do not use summary cards if you only need to show a small amount of related information. Use summary lists instead, and structure them with headings if needed.

If you're showing summary cards at the end of a longer journey, you might want to familiarise the user with them earlier on, such as when the user reviews individual sections.

Card titles

Use the summary card's header area to give each summary list a title.

Each title must be unique and help identify what the summary list describes. For example, this could be the name of a specific person, organisation or professional qualification.

Try to keep titles short and relevant. You can use 1 or 2 important values in the summary list, such as the first and last name of a person.

Open this example in a new tab: summary list summary card 
<div class="nhsuk-card">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Karen Francis
    </h2>
    <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 class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> name (Karen Francis)</span></a>
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Appointment date
        </dt>
        <dd class="nhsuk-summary-list__value">
          15 March 2027
        </dd>
        <dd class="nhsuk-summary-list__actions">
          <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> date of birth (Karen Francis)</span></a>
        </dd>
      </div>
      <div class="nhsuk-summary-list__row nhsuk-summary-list__row--no-border">
        <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 class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> contact details (Karen Francis)</span></a>
        </dd>
      </div>
    </dl>
  </div>
</div>

<div class="nhsuk-card">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Dwayne Harvey
    </h2>
    <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">
          Dwayne Harvey
        </dd>
        <dd class="nhsuk-summary-list__actions">
          <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> name (Dwayne Harvey )</span></a>
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Appointment date
        </dt>
        <dd class="nhsuk-summary-list__value">
          15 March 2027
        </dd>
        <dd class="nhsuk-summary-list__actions">
          <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> date of birth (Dwayne Harvey )</span></a>
        </dd>
      </div>
      <div class="nhsuk-summary-list__row nhsuk-summary-list__row--no-border">
        <dt class="nhsuk-summary-list__key">
          Contact details
        </dt>
        <dd class="nhsuk-summary-list__value">
          <p>07964 850567</p>
          <p>dwayne.harvey@example.com</p>
        </dd>
        <dd class="nhsuk-summary-list__actions">
          <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> contact details (Dwayne Harvey )</span></a>
        </dd>
      </div>
    </dl>
  </div>
</div>
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
id string The ID of the summary list.
rows array Required. The rows within the summary list component. See macro options for rows.
card object Can be used to wrap a card around the summary list component. If any of these options are present, a card will wrap around the summary list. See macro options for card.
classes string Classes to add to the container.
attributes object HTML attributes (for example data attributes) to add to the container.
Options for rows array objects
Name Type Description
classes string Classes to add to the row div.
key object Required. The reference content (key) for each row item in the summary list component. See macro options for rows key.
value object Required. The value for each row item in the summary list component. See macro options for rows value.
actions object The action link content for each row item in the summary list component. See macro options for rows actions.
Options for rows key object
Name Type Description
text string Required. If html is set, this is not required. Text to use within each key. 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 each key. If html is provided, the text option will be ignored.
classes string Classes to add to the key wrapper.
Options for rows value object
Name Type Description
text string Required. If html is set, this is not required. Text to use within each value. 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 each value. If html is provided, the text option will be ignored.
classes string Classes to add to the value wrapper.
Options for rows actions object
Name Type Description
items array The action link items within the row item of the summary list component. See macro options for rows actions items.
classes string Classes to add to the actions wrapper.
Options for rows actions items array objects
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 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 "summary-list/macro.njk" import summaryList %}

{{ summaryList({
  card: {
    heading: "Karen Francis",
    headingSize: "m"
  },
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "name"
          }
        ]
      }
    },
    {
      key: {
        text: "Appointment date"
      },
      value: {
        text: "15 March 2027"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "date of birth"
          }
        ]
      }
    },
    {
      classes: "nhsuk-summary-list__row--no-border",
      key: {
        text: "Contact details"
      },
      value: {
        html: "<p>07700 900362</p><p>karen.francis@example.com</p>"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "contact details"
          }
        ]
      }
    }
  ]
}) }}

{{ summaryList({
  card: {
    heading: "Dwayne Harvey ",
    headingSize: "m"
  },
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Dwayne Harvey"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "name"
          }
        ]
      }
    },
    {
      key: {
        text: "Appointment date"
      },
      value: {
        text: "15 March 2027"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "date of birth"
          }
        ]
      }
    },
    {
      classes: "nhsuk-summary-list__row--no-border",
      key: {
        text: "Contact details"
      },
      value: {
        html: "<p>07964 850567</p><p>dwayne.harvey@example.com</p>"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "contact details"
          }
        ]
      }
    }
  ]
}) }}

The example uses the nhsuk-summary-list__row--no-border class to remove the bottom border of the last row.

Card actions

You can add card actions in the header, which will be shown after the summary card's title.

For example, if you have multiple rows with "change" actions that all take the user to the same place, you can show a single "change" card action instead. This helps avoid repeating the same row action on every row.

Card actions are shown in bold text to make them visually distinct from row actions. They help alert the user that the card action will affect the entire summary card.

Write link text for card actions to tell the user what the card action will do and that it will apply to the entire summary card. It should also be as short as possible, usually 2 words.

Example card actions include:

  • Remove appointment
  • Edit appointment
  • Update issue
  • Approve application
  • Cancel order

Keep it short and do not add more than 2 to 3 actions in a header.

If a card action cannot easily be undone or might have serious consequences, consider adding a warning or asking the user for confirmation.

Open this example in a new tab: summary list summary card with actions 
<div class="nhsuk-card">
  <div class="nhsuk-card__heading-container">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Karen Francis
    </h2>
    <ul class="nhsuk-card__actions">
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#">Cancel<span class="nhsuk-u-visually-hidden"> (Karen Francis)</span></a>
      </li>
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#">Reschedule<span class="nhsuk-u-visually-hidden"> (Karen Francis)</span></a>
      </li>
    </ul>
  </div>
  <div class="nhsuk-card__content">
    <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 class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> name (Karen Francis)</span></a>
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Appointment date
        </dt>
        <dd class="nhsuk-summary-list__value">
          15 March 2027
        </dd>
        <dd class="nhsuk-summary-list__actions">
          <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> date of birth (Karen Francis)</span></a>
        </dd>
      </div>
      <div class="nhsuk-summary-list__row nhsuk-summary-list__row--no-border">
        <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 class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> contact details (Karen Francis)</span></a>
        </dd>
      </div>
    </dl>
  </div>
</div>

<div class="nhsuk-card">
  <div class="nhsuk-card__heading-container">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Dwayne Harvey
    </h2>
    <ul class="nhsuk-card__actions">
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#">Cancel<span class="nhsuk-u-visually-hidden"> (Dwayne Harvey )</span></a>
      </li>
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#">Reschedule<span class="nhsuk-u-visually-hidden"> (Dwayne Harvey )</span></a>
      </li>
    </ul>
  </div>
  <div class="nhsuk-card__content">
    <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">
          Dwayne Harvey
        </dd>
        <dd class="nhsuk-summary-list__actions">
          <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> name (Dwayne Harvey )</span></a>
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Appointment date
        </dt>
        <dd class="nhsuk-summary-list__value">
          15 March 2027
        </dd>
        <dd class="nhsuk-summary-list__actions">
          <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> date of birth (Dwayne Harvey )</span></a>
        </dd>
      </div>
      <div class="nhsuk-summary-list__row nhsuk-summary-list__row--no-border">
        <dt class="nhsuk-summary-list__key">
          Contact details
        </dt>
        <dd class="nhsuk-summary-list__value">
          <p>07964 850567</p>
          <p>dwayne.harvey@example.com</p>
        </dd>
        <dd class="nhsuk-summary-list__actions">
          <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> contact details (Dwayne Harvey )</span></a>
        </dd>
      </div>
    </dl>
  </div>
</div>
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
id string The ID of the summary list.
rows array Required. The rows within the summary list component. See macro options for rows.
card object Can be used to wrap a card around the summary list component. If any of these options are present, a card will wrap around the summary list. See macro options for card.
classes string Classes to add to the container.
attributes object HTML attributes (for example data attributes) to add to the container.
Options for rows array objects
Name Type Description
classes string Classes to add to the row div.
key object Required. The reference content (key) for each row item in the summary list component. See macro options for rows key.
value object Required. The value for each row item in the summary list component. See macro options for rows value.
actions object The action link content for each row item in the summary list component. See macro options for rows actions.
Options for rows key object
Name Type Description
text string Required. If html is set, this is not required. Text to use within each key. 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 each key. If html is provided, the text option will be ignored.
classes string Classes to add to the key wrapper.
Options for rows value object
Name Type Description
text string Required. If html is set, this is not required. Text to use within each value. 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 each value. If html is provided, the text option will be ignored.
classes string Classes to add to the value wrapper.
Options for rows actions object
Name Type Description
items array The action link items within the row item of the summary list component. See macro options for rows actions items.
classes string Classes to add to the actions wrapper.
Options for rows actions items array objects
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 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 "summary-list/macro.njk" import summaryList %}

{{ summaryList({
  card: {
    heading: "Karen Francis",
    headingSize: "m",
    actions: {
      items: [
        {
          text: "Cancel",
          href: "#"
        },
        {
          text: "Reschedule",
          href: "#"
        }
      ]
    }
  },
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "name"
          }
        ]
      }
    },
    {
      key: {
        text: "Appointment date"
      },
      value: {
        text: "15 March 2027"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "date of birth"
          }
        ]
      }
    },
    {
      classes: "nhsuk-summary-list__row--no-border",
      key: {
        text: "Contact details"
      },
      value: {
        html: "<p>07700 900362</p><p>karen.francis@example.com</p>"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "contact details"
          }
        ]
      }
    }
  ]
}) }}

{{ summaryList({
  card: {
    heading: "Dwayne Harvey ",
    headingSize: "m",
    actions: {
      items: [
        {
          text: "Cancel",
          href: "#"
        },
        {
          text: "Reschedule",
          href: "#"
        }
      ]
    }
  },
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Dwayne Harvey"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "name"
          }
        ]
      }
    },
    {
      key: {
        text: "Appointment date"
      },
      value: {
        text: "15 March 2027"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "date of birth"
          }
        ]
      }
    },
    {
      classes: "nhsuk-summary-list__row--no-border",
      key: {
        text: "Contact details"
      },
      value: {
        html: "<p>07964 850567</p><p>dwayne.harvey@example.com</p>"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "contact details"
          }
        ]
      }
    }
  ]
}) }}

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.

Feed back or share insights on GitHub

Read more about how to feed back or share insights.

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

Updated: January 2026