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
Name
Sarah Philips
Change name
Date of birth
5 January 1978
Change date of birth
Address
72 Guild Street
London
SE23 6FH
Change address
Contact details

07700 900457

sarah.phillips@example.com

Change contact details
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.

The rows within the summary list component.

See rows.
card object

Can be used to wrap a summary card around the summary list component. If any of these options are present, a summary card will wrap around the summary list.

See card.
classes string

Classes to add to the container.
attributes object

HTML attributes (for example data attributes) to add to the container.
Options for card
Name Type Description
title object

Data for the summary card header.

See title.
actions object

The action link content shown in the header of each summary card wrapped around the summary list component.

See actions.
classes string

Classes to add to the container.
attributes object

HTML attributes (for example data attributes) to add to the container.
Options for actions
Name Type Description
items array

The action link items shown in the header within the summary card wrapped around the summary list component.

See items.
classes string

Classes to add to the actions wrapper.
Options for 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 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.
Options for title
Name Type Description
text string

Text to use within each title. If html is provided, the text option will be ignored.
html string

Text to use within each title. If html is provided, the text option will be ignored.
headingLevel integer

Heading level, from 1 to 6. Default is 2.
classes string

Classes to add to the title wrapper.
Options for rows
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 key.
value object Required.

The value for each row item in the summary list component.

See value.
actions object

The action link content for each row item in the summary list component.

See actions.
Options for actions
Name Type Description
items array

The action link items within the row item of the summary list component.

See items.
classes string

Classes to add to the actions wrapper.
Options for 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 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.
Options for key
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 value
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.

 
{% from "moduk/components/summary-list/macro.njk" import modukSummaryList -%}

{{ modukSummaryList({
  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"
          }
        ]
      }
    }
  ]
}) -}}

See GOV.UK summary list component guidance for:

  • when to use this component
  • when not to use it

How it works

See GOV.UK summary list component guidance for detail on how this component works.

Adding actions to each row

You can add actions to a summary list, like a ‘Change’ link to let users go back and edit some of or all of their answers.

Open this summary list example in a new tab
Name
Sarah Philips
Change name
Date of birth
5 January 1978
Change date of birth
Address
72 Guild Street
London
SE23 6FH
Change address
Contact details

07700 900457

sarah.phillips@example.com

Change contact details
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.

The rows within the summary list component.

See rows.
card object

Can be used to wrap a summary card around the summary list component. If any of these options are present, a summary card will wrap around the summary list.

See card.
classes string

Classes to add to the container.
attributes object

HTML attributes (for example data attributes) to add to the container.
Options for card
Name Type Description
title object

Data for the summary card header.

See title.
actions object

The action link content shown in the header of each summary card wrapped around the summary list component.

See actions.
classes string

Classes to add to the container.
attributes object

HTML attributes (for example data attributes) to add to the container.
Options for actions
Name Type Description
items array

The action link items shown in the header within the summary card wrapped around the summary list component.

See items.
classes string

Classes to add to the actions wrapper.
Options for 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 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.
Options for title
Name Type Description
text string

Text to use within each title. If html is provided, the text option will be ignored.
html string

Text to use within each title. If html is provided, the text option will be ignored.
headingLevel integer

Heading level, from 1 to 6. Default is 2.
classes string

Classes to add to the title wrapper.
Options for rows
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 key.
value object Required.

The value for each row item in the summary list component.

See value.
actions object

The action link content for each row item in the summary list component.

See actions.
Options for actions
Name Type Description
items array

The action link items within the row item of the summary list component.

See items.
classes string

Classes to add to the actions wrapper.
Options for 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 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.
Options for key
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 value
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.

 
{% from "moduk/components/summary-list/macro.njk" import modukSummaryList -%}

{{ modukSummaryList({
  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"
          }
        ]
      }
    }
  ]
}) -}}

Removing the borders

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 summary list example in a new tab
Name
Sarah Philips
Date of birth
5 January 1978
Address
72 Guild Street
London
SE23 6FH
Contact details

07700 900457

sarah.phillips@example.com

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.

The rows within the summary list component.

See rows.
card object

Can be used to wrap a summary card around the summary list component. If any of these options are present, a summary card will wrap around the summary list.

See card.
classes string

Classes to add to the container.
attributes object

HTML attributes (for example data attributes) to add to the container.
Options for card
Name Type Description
title object

Data for the summary card header.

See title.
actions object

The action link content shown in the header of each summary card wrapped around the summary list component.

See actions.
classes string

Classes to add to the container.
attributes object

HTML attributes (for example data attributes) to add to the container.
Options for actions
Name Type Description
items array

The action link items shown in the header within the summary card wrapped around the summary list component.

See items.
classes string

Classes to add to the actions wrapper.
Options for 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 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.
Options for title
Name Type Description
text string

Text to use within each title. If html is provided, the text option will be ignored.
html string

Text to use within each title. If html is provided, the text option will be ignored.
headingLevel integer

Heading level, from 1 to 6. Default is 2.
classes string

Classes to add to the title wrapper.
Options for rows
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 key.
value object Required.

The value for each row item in the summary list component.

See value.
actions object

The action link content for each row item in the summary list component.

See actions.
Options for actions
Name Type Description
items array

The action link items within the row item of the summary list component.

See items.
classes string

Classes to add to the actions wrapper.
Options for 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 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.
Options for key
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 value
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.

 
{% from "moduk/components/summary-list/macro.njk" import modukSummaryList -%}

{{ modukSummaryList({
  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>'
      }
    }
  ]
}) -}}

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.

Open this summary list example in a new tab

Lead tenant

Age
38
Change age (Lead tenant)
Nationality
UK national resident in UK
Change nationality (Lead tenant)
Working situation
Part time – less than 30 hours a week
Change working situation (Lead tenant)

Person 2

Details known
Yes
Change whether details are known (Person 2)
Relationship to lead tenant
Partner
Change relationship to lead tenant (Person 2)
Age
42
Change age (Person 2)
Working situation
Unable to work because of long-term sickness or disability
Change working situation (Person 2)

Person 3

Details known
Yes
Change whether details are known (Person 3)
Relationship to lead tenant
Child
Change relationship to lead tenant (Person 3)
Age
7
Change age (Person 3)
Working situation
Child under 16
Change working situation (Person 3)
HTML 
<div>
  <div class="govuk-summary-card">
    <div class="govuk-summary-card__title-wrapper">
      <h2 class="govuk-summary-card__title">Lead tenant</h2>
    </div>

    <div class="govuk-summary-card__content">
      <dl class="govuk-summary-list">
        <div class="govuk-summary-list__row">
          <dt class="govuk-summary-list__key">Age</dt>
          <dd class="govuk-summary-list__value">38</dd>
          <dd class="govuk-summary-list__actions">
            <a class="govuk-link" href="#"
              >Change<span class="govuk-visually-hidden">
                age (Lead tenant)</span
              ></a
            >
          </dd>
        </div>
        <div class="govuk-summary-list__row">
          <dt class="govuk-summary-list__key">Nationality</dt>
          <dd class="govuk-summary-list__value">UK national resident in UK</dd>
          <dd class="govuk-summary-list__actions">
            <a class="govuk-link" href="#"
              >Change<span class="govuk-visually-hidden">
                nationality (Lead tenant)</span
              ></a
            >
          </dd>
        </div>
        <div class="govuk-summary-list__row">
          <dt class="govuk-summary-list__key">Working situation</dt>
          <dd class="govuk-summary-list__value">
            Part time – less than 30 hours a week
          </dd>
          <dd class="govuk-summary-list__actions">
            <a class="govuk-link" href="#"
              >Change<span class="govuk-visually-hidden">
                working situation (Lead tenant)</span
              ></a
            >
          </dd>
        </div>
      </dl>
    </div>
  </div>
  <div class="govuk-summary-card">
    <div class="govuk-summary-card__title-wrapper">
      <h2 class="govuk-summary-card__title">Person 2</h2>
    </div>

    <div class="govuk-summary-card__content">
      <dl class="govuk-summary-list">
        <div class="govuk-summary-list__row">
          <dt class="govuk-summary-list__key">Details known</dt>
          <dd class="govuk-summary-list__value">Yes</dd>
          <dd class="govuk-summary-list__actions">
            <a class="govuk-link" href="#"
              >Change<span class="govuk-visually-hidden">
                whether details are known (Person 2)</span
              ></a
            >
          </dd>
        </div>
        <div class="govuk-summary-list__row">
          <dt class="govuk-summary-list__key">Relationship to lead tenant</dt>
          <dd class="govuk-summary-list__value">Partner</dd>
          <dd class="govuk-summary-list__actions">
            <a class="govuk-link" href="#"
              >Change<span class="govuk-visually-hidden">
                relationship to lead tenant (Person 2)</span
              ></a
            >
          </dd>
        </div>
        <div class="govuk-summary-list__row">
          <dt class="govuk-summary-list__key">Age</dt>
          <dd class="govuk-summary-list__value">42</dd>
          <dd class="govuk-summary-list__actions">
            <a class="govuk-link" href="#"
              >Change<span class="govuk-visually-hidden">
                age (Person 2)</span
              ></a
            >
          </dd>
        </div>
        <div class="govuk-summary-list__row">
          <dt class="govuk-summary-list__key">Working situation</dt>
          <dd class="govuk-summary-list__value">
            Unable to work because of long-term sickness or disability
          </dd>
          <dd class="govuk-summary-list__actions">
            <a class="govuk-link" href="#"
              >Change<span class="govuk-visually-hidden">
                working situation (Person 2)</span
              ></a
            >
          </dd>
        </div>
      </dl>
    </div>
  </div>
  <div class="govuk-summary-card">
    <div class="govuk-summary-card__title-wrapper">
      <h2 class="govuk-summary-card__title">Person 3</h2>
    </div>

    <div class="govuk-summary-card__content">
      <dl class="govuk-summary-list">
        <div class="govuk-summary-list__row">
          <dt class="govuk-summary-list__key">Details known</dt>
          <dd class="govuk-summary-list__value">Yes</dd>
          <dd class="govuk-summary-list__actions">
            <a class="govuk-link" href="#"
              >Change<span class="govuk-visually-hidden">
                whether details are known (Person 3)</span
              ></a
            >
          </dd>
        </div>
        <div class="govuk-summary-list__row">
          <dt class="govuk-summary-list__key">Relationship to lead tenant</dt>
          <dd class="govuk-summary-list__value">Child</dd>
          <dd class="govuk-summary-list__actions">
            <a class="govuk-link" href="#"
              >Change<span class="govuk-visually-hidden">
                relationship to lead tenant (Person 3)</span
              ></a
            >
          </dd>
        </div>
        <div class="govuk-summary-list__row">
          <dt class="govuk-summary-list__key">Age</dt>
          <dd class="govuk-summary-list__value">7</dd>
          <dd class="govuk-summary-list__actions">
            <a class="govuk-link" href="#"
              >Change<span class="govuk-visually-hidden">
                age (Person 3)</span
              ></a
            >
          </dd>
        </div>
        <div class="govuk-summary-list__row">
          <dt class="govuk-summary-list__key">Working situation</dt>
          <dd class="govuk-summary-list__value">Child under 16</dd>
          <dd class="govuk-summary-list__actions">
            <a class="govuk-link" href="#"
              >Change<span class="govuk-visually-hidden">
                working situation (Person 3)</span
              ></a
            >
          </dd>
        </div>
      </dl>
    </div>
  </div>
</div>
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.

The rows within the summary list component.

See rows.
card object

Can be used to wrap a summary card around the summary list component. If any of these options are present, a summary card will wrap around the summary list.

See card.
classes string

Classes to add to the container.
attributes object

HTML attributes (for example data attributes) to add to the container.
Options for card
Name Type Description
title object

Data for the summary card header.

See title.
actions object

The action link content shown in the header of each summary card wrapped around the summary list component.

See actions.
classes string

Classes to add to the container.
attributes object

HTML attributes (for example data attributes) to add to the container.
Options for actions
Name Type Description
items array

The action link items shown in the header within the summary card wrapped around the summary list component.

See items.
classes string

Classes to add to the actions wrapper.
Options for 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 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.
Options for title
Name Type Description
text string

Text to use within each title. If html is provided, the text option will be ignored.
html string

Text to use within each title. If html is provided, the text option will be ignored.
headingLevel integer

Heading level, from 1 to 6. Default is 2.
classes string

Classes to add to the title wrapper.
Options for rows
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 key.
value object Required.

The value for each row item in the summary list component.

See value.
actions object

The action link content for each row item in the summary list component.

See actions.
Options for actions
Name Type Description
items array

The action link items within the row item of the summary list component.

See items.
classes string

Classes to add to the actions wrapper.
Options for 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 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.
Options for key
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 value
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.

 
{% from "moduk/components/summary-list/macro.njk" import modukSummaryList -%}

<div>

{{ modukSummaryList({
  card: {
    title: {
      text: "Lead tenant"
    }
  },
  rows: [
    {
      key: {
        text: "Age"
      },
      value: {
        html: "38"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "age"
          }
        ]
      }
    },
    {
      key: {
        text: "Nationality"
      },
      value: {
        html: "UK national resident in UK"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "nationality"
          }
        ]
      }
    },
    {
      key: {
        text: "Working situation"
      },
      value: {
        html: "Part time – less than 30 hours a week"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "working situation"
          }
        ]
      }
    }
  ]
}) -}}

{{ modukSummaryList({
  card: {
    title: {
      text: "Person 2"
    }
  },
  rows: [
    {
      key: {
        text: "Details known"
      },
      value: {
        html: "Yes"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "whether details are known"
          }
        ]
      }
    },
    {
      key: {
        text: "Relationship to lead tenant"
      },
      value: {
        html: "Partner"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "relationship to lead tenant"
          }
        ]
      }
    },
    {
      key: {
        text: "Age"
      },
      value: {
        html: "42"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "age"
          }
        ]
      }
    },
    {
      key: {
        text: "Working situation"
      },
      value: {
        html: "Unable to work because of long-term sickness or disability"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "working situation"
          }
        ]
      }
    }
  ]
}) -}}

{{ modukSummaryList({
  card: {
    title: {
      text: "Person 3"
    }
  },
  rows: [
    {
      key: {
        text: "Details known"
      },
      value: {
        html: "Yes"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "whether details are known"
          }
        ]
      }
    },
    {
      key: {
        text: "Relationship to lead tenant"
      },
      value: {
        html: "Child"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "relationship to lead tenant"
          }
        ]
      }
    },
    {
      key: {
        text: "Age"
      },
      value: {
        html: "7"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "age"
          }
        ]
      }
    },
    {
      key: {
        text: "Working situation"
      },
      value: {
        html: "Child under 16"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "working situation"
          }
        ]
      }
    }
  ]
}) -}}
</div>

Adding card actions

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

Open this summary list example in a new tab

University of Gloucestershire

Course
English (3DMD)
PGCE with QTS full time
Location
School name
Road, City, SW1 1AA

University of Bristol

Course
English (Q3X1)
PGCE with QTS full time
Location
School name
Road, City, SW2 1AA
HTML 
<div>
  <div class="govuk-summary-card">
    <div class="govuk-summary-card__title-wrapper">
      <h2 class="govuk-summary-card__title">University of Gloucestershire</h2>
      <ul class="govuk-summary-card__actions">
        <li class="govuk-summary-card__action">
          <a class="govuk-link" href="#"
            >Delete choice<span class="govuk-visually-hidden">
              of University of Gloucestershire (University of
              Gloucestershire)</span
            ></a
          >
        </li>
        <li class="govuk-summary-card__action">
          <a class="govuk-link" href="#"
            >Withdraw<span class="govuk-visually-hidden">
              from University of Gloucestershire (University of
              Gloucestershire)</span
            ></a
          >
        </li>
      </ul>
    </div>

    <div class="govuk-summary-card__content">
      <dl class="govuk-summary-list">
        <div class="govuk-summary-list__row">
          <dt class="govuk-summary-list__key">Course</dt>
          <dd class="govuk-summary-list__value">
            English (3DMD)<br />PGCE with QTS full time
          </dd>
        </div>
        <div class="govuk-summary-list__row">
          <dt class="govuk-summary-list__key">Location</dt>
          <dd class="govuk-summary-list__value">
            School name<br />Road, City, SW1 1AA
          </dd>
        </div>
      </dl>
    </div>
  </div>
  <div class="govuk-summary-card">
    <div class="govuk-summary-card__title-wrapper">
      <h2 class="govuk-summary-card__title">University of Bristol</h2>
      <ul class="govuk-summary-card__actions">
        <li class="govuk-summary-card__action">
          <a class="govuk-link" href="#"
            >Delete choice<span class="govuk-visually-hidden">
              of University of Bristol (University of Bristol)</span
            ></a
          >
        </li>
        <li class="govuk-summary-card__action">
          <a class="govuk-link" href="#"
            >Withdraw<span class="govuk-visually-hidden">
              from University of Bristol (University of Bristol)</span
            ></a
          >
        </li>
      </ul>
    </div>

    <div class="govuk-summary-card__content">
      <dl class="govuk-summary-list">
        <div class="govuk-summary-list__row">
          <dt class="govuk-summary-list__key">Course</dt>
          <dd class="govuk-summary-list__value">
            English (Q3X1)<br />PGCE with QTS full time
          </dd>
        </div>
        <div class="govuk-summary-list__row">
          <dt class="govuk-summary-list__key">Location</dt>
          <dd class="govuk-summary-list__value">
            School name<br />Road, City, SW2 1AA
          </dd>
        </div>
      </dl>
    </div>
  </div>
</div>
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.

The rows within the summary list component.

See rows.
card object

Can be used to wrap a summary card around the summary list component. If any of these options are present, a summary card will wrap around the summary list.

See card.
classes string

Classes to add to the container.
attributes object

HTML attributes (for example data attributes) to add to the container.
Options for card
Name Type Description
title object

Data for the summary card header.

See title.
actions object

The action link content shown in the header of each summary card wrapped around the summary list component.

See actions.
classes string

Classes to add to the container.
attributes object

HTML attributes (for example data attributes) to add to the container.
Options for actions
Name Type Description
items array

The action link items shown in the header within the summary card wrapped around the summary list component.

See items.
classes string

Classes to add to the actions wrapper.
Options for 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 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.
Options for title
Name Type Description
text string

Text to use within each title. If html is provided, the text option will be ignored.
html string

Text to use within each title. If html is provided, the text option will be ignored.
headingLevel integer

Heading level, from 1 to 6. Default is 2.
classes string

Classes to add to the title wrapper.
Options for rows
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 key.
value object Required.

The value for each row item in the summary list component.

See value.
actions object

The action link content for each row item in the summary list component.

See actions.
Options for actions
Name Type Description
items array

The action link items within the row item of the summary list component.

See items.
classes string

Classes to add to the actions wrapper.
Options for 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 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.
Options for key
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 value
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.

 
{% from "moduk/components/summary-list/macro.njk" import modukSummaryList -%}

<div>
{{ modukSummaryList({
  card: {
    title: {
      text: "University of Gloucestershire"
    },
    actions: {
      items: [
        {
          href: "#",
          text: "Delete choice",
          visuallyHiddenText: "of University of Gloucestershire"
        },
        {
          href: "#",
          text: "Withdraw",
          visuallyHiddenText: "from University of Gloucestershire"
        }
      ]
    }
  },
  rows: [
    {
      key: {
        text: "Course"
      },
      value: {
        html: "English (3DMD)<br>PGCE with QTS full time"
      }
    },
    {
      key: {
        text: "Location"
      },
      value: {
        html: "School name<br>Road, City, SW1 1AA"
      }
    }
  ]
}) -}}

{{ modukSummaryList({
  card: {
    title: {
      text: "University of Bristol"
    },
    actions: {
      items: [
        {
          href: "#",
          text: "Delete choice",
          visuallyHiddenText: "of University of Bristol"
        },
        {
          href: "#",
          text: "Withdraw",
          visuallyHiddenText: "from University of Bristol"
        }
      ]
    }
  },
  rows: [
    {
      key: {
        text: "Course"
      },
      value: {
        html: "English (Q3X1)<br>PGCE with QTS full time"
      }
    },
    {
      key: {
        text: "Location"
      },
      value: {
        html: "School name<br>Road, City, SW2 1AA"
      }
    }
  ]
}) -}}
</div>

Changes from the GOV.UK version

MOD.UK Design System components are closely based on GOV.UK Design System components.

For this component we’ve changed the font.

Have you tested this component?

Let us know how we could improve this component or share your user research findings.

Email the MOD.UK Design System team at design-system@digital.mod.uk

Need help?

Email the MOD.UK Design System team at design-system@digital.mod.uk if you have questions or feedback.