This is an internal development app.
To learn how to use the GOV.UK Design System in your project, see Get started.

Skip to main content

Summary list

Summary list

Open this example in a new tab: summary list

Code

Markup

<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">
      Firstname Lastname
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="govuk-summary-list__value">
      13/08/1980
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Contact information
    </dt>
    <dd class="govuk-summary-list__value">
      <p class="govuk-body">
        email@email.com
      </p>
      <p class="govuk-body">
        Address line 1<br>
        Address line 2<br>
        Address line 3<br>
        Address line 4<br>
        Address line 5
      </p>
    </dd>
  </div>
</dl>

Macro

{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

{{ govukSummaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Firstname Lastname"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "13/08/1980"
      }
    },
    {
      key: {
        text: "Contact information"
      },
      value: {
        html:
          '<p class="govuk-body">\n' +
          "  email@email.com\n" +
          "</p>\n" +
          '<p class="govuk-body">\n' +
          "  Address line 1<br>\n" +
          "  Address line 2<br>\n" +
          "  Address line 3<br>\n" +
          "  Address line 4<br>\n" +
          "  Address line 5\n" +
          "</p>\n"
      }
    }
  ]
}) }}

Summary list with actions

Open this example in a new tab: summary list with actions

Code

Markup

<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">
      Firstname Lastname
    </dd>
    <dd class="govuk-summary-list__actions">
      <ul class="govuk-summary-list__actions-list">
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Edit<span class="govuk-visually-hidden"> name</span></a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Delete<span class="govuk-visually-hidden"> name</span></a>
        </li>
      </ul>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="govuk-summary-list__value">
      13/08/1980
    </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">
      Contact information
    </dt>
    <dd class="govuk-summary-list__value">
      <p class="govuk-body">
        email@email.com
      </p>
      <p class="govuk-body">
        Address line 1<br>
        Address line 2<br>
        Address line 3<br>
        Address line 4<br>
        Address line 5
      </p>
    </dd>
    <dd class="govuk-summary-list__actions">
      <ul class="govuk-summary-list__actions-list">
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Edit<span class="govuk-visually-hidden"> contact information</span></a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> contact information</span></a>
        </li>
      </ul>
    </dd>
  </div>
</dl>

Macro

{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

{{ govukSummaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Firstname Lastname"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Edit",
            visuallyHiddenText: "name"
          },
          {
            href: "#",
            text: "Delete",
            visuallyHiddenText: "name"
          }
        ]
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "13/08/1980"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "date of birth"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact information"
      },
      value: {
        html:
          '<p class="govuk-body">\n' +
          "  email@email.com\n" +
          "</p>\n" +
          '<p class="govuk-body">\n' +
          "  Address line 1<br>\n" +
          "  Address line 2<br>\n" +
          "  Address line 3<br>\n" +
          "  Address line 4<br>\n" +
          "  Address line 5\n" +
          "</p>\n"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Edit",
            visuallyHiddenText: "contact information"
          },
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "contact information"
          }
        ]
      }
    }
  ]
}) }}

Summary list translated

Open this example in a new tab: summary list translated

Code

Markup

<dl class="govuk-summary-list">
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Enw
    </dt>
    <dd class="govuk-summary-list__value">
      Firstname Lastname
    </dd>
    <dd class="govuk-summary-list__actions">
      <ul class="govuk-summary-list__actions-list">
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Golygu<span class="govuk-visually-hidden"> enw</span></a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Dileu<span class="govuk-visually-hidden"> enw</span></a>
        </li>
      </ul>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Dyddiad geni
    </dt>
    <dd class="govuk-summary-list__value">
      13/08/1980
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">Golygu<span class="govuk-visually-hidden"> dyddiad geni</span></a>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Gwybodaeth cyswllt
    </dt>
    <dd class="govuk-summary-list__value">
      <p class="govuk-body">
        email@email.com
      </p>
      <p class="govuk-body">
        Address line 1<br>
        Address line 2<br>
        Address line 3<br>
        Address line 4<br>
        Address line 5
      </p>
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">Golygu<span class="govuk-visually-hidden"> gwybodaeth cyswllt</span></a>
    </dd>
  </div>
</dl>

Macro

{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

{{ govukSummaryList({
  rows: [
    {
      key: {
        text: "Enw"
      },
      value: {
        text: "Firstname Lastname"
      },
      actions: {
        items: [
          {
            href: "#",
            html: 'Golygu<span class="govuk-visually-hidden"> enw</span>',
            visuallyHiddenText: ""
          },
          {
            href: "#",
            html: 'Dileu<span class="govuk-visually-hidden"> enw</span>',
            visuallyHiddenText: ""
          }
        ]
      }
    },
    {
      key: {
        text: "Dyddiad geni"
      },
      value: {
        text: "13/08/1980"
      },
      actions: {
        items: [
          {
            href: "#",
            html: 'Golygu<span class="govuk-visually-hidden"> dyddiad geni</span>',
            visuallyHiddenText: ""
          }
        ]
      }
    },
    {
      key: {
        text: "Gwybodaeth cyswllt"
      },
      value: {
        html:
          '<p class="govuk-body">\n' +
          "  email@email.com\n" +
          "</p>\n" +
          '<p class="govuk-body">\n' +
          "  Address line 1<br>\n" +
          "  Address line 2<br>\n" +
          "  Address line 3<br>\n" +
          "  Address line 4<br>\n" +
          "  Address line 5\n" +
          "</p>\n"
      },
      actions: {
        items: [
          {
            href: "#",
            html: 'Golygu<span class="govuk-visually-hidden"> gwybodaeth cyswllt</span>',
            visuallyHiddenText: ""
          }
        ]
      }
    }
  ]
}) }}

Summary list with some actions

Open this example in a new tab: summary list with some actions

Code

Markup

<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">
      Firstname Lastname
    </dd>
    <dd class="govuk-summary-list__actions">
      <ul class="govuk-summary-list__actions-list">
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Edit<span class="govuk-visually-hidden"> name</span></a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Delete<span class="govuk-visually-hidden"> name</span></a>
        </li>
      </ul>
    </dd>
  </div>
  <div class="govuk-summary-list__row govuk-summary-list__row--no-actions">
    <dt class="govuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="govuk-summary-list__value">
      13/08/1980
    </dd>
  </div>
  <div class="govuk-summary-list__row govuk-summary-list__row--no-actions">
    <dt class="govuk-summary-list__key">
      Contact information
    </dt>
    <dd class="govuk-summary-list__value">
      <p class="govuk-body">
        email@email.com
      </p>
      <p class="govuk-body">
        Address line 1<br>
        Address line 2<br>
        Address line 3<br>
        Address line 4<br>
        Address line 5
      </p>
    </dd>
  </div>
</dl>

Macro

{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

{{ govukSummaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Firstname Lastname"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Edit",
            visuallyHiddenText: "name"
          },
          {
            href: "#",
            text: "Delete",
            visuallyHiddenText: "name"
          }
        ]
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "13/08/1980"
      }
    },
    {
      key: {
        text: "Contact information"
      },
      value: {
        html:
          '<p class="govuk-body">\n' +
          "  email@email.com\n" +
          "</p>\n" +
          '<p class="govuk-body">\n' +
          "  Address line 1<br>\n" +
          "  Address line 2<br>\n" +
          "  Address line 3<br>\n" +
          "  Address line 4<br>\n" +
          "  Address line 5\n" +
          "</p>\n"
      }
    }
  ]
}) }}

Summary list with no first action

Open this example in a new tab: summary list with no first action

Code

Markup

<dl class="govuk-summary-list">
  <div class="govuk-summary-list__row govuk-summary-list__row--no-actions">
    <dt class="govuk-summary-list__key">
      Name
    </dt>
    <dd class="govuk-summary-list__value">
      Sarah Philips
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="govuk-summary-list__value">
      5 January 1978
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> date of birth</span></a>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Address
    </dt>
    <dd class="govuk-summary-list__value">
      72 Guild Street<br>
      London<br>
      SE23 6FH
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> address</span></a>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Contact details
    </dt>
    <dd class="govuk-summary-list__value">
      07700 900457<br>
      sarah.phillips@example.com
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> contact details</span></a>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Licence period
    </dt>
    <dd class="govuk-summary-list__value">
      <p class="govuk-body">This is a longer paragraph of text provided by the user to provide additional information.</p>
      <p class="govuk-body">This is a second paragraph of text provided by the user.</p>
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> licence period</span></a>
    </dd>
  </div>
</dl>

Macro

{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

{{ govukSummaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Sarah Philips"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "5 January 1978"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "date of birth"
          }
        ]
      }
    },
    {
      key: {
        text: "Address"
      },
      value: {
        html: "72 Guild Street<br>\nLondon<br>\nSE23 6FH\n"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "address"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact details"
      },
      value: {
        html: "07700 900457<br>\nsarah.phillips@example.com\n"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "contact details"
          }
        ]
      }
    },
    {
      key: {
        text: "Licence period"
      },
      value: {
        html:
          '<p class="govuk-body">This is a longer paragraph of text provided by the user to provide additional information.</p>\n' +
          '<p class="govuk-body">This is a second paragraph of text provided by the user.</p>\n'
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "licence period"
          }
        ]
      }
    }
  ]
}) }}

Summary list no-border

Open this example in a new tab: summary list no-border

Code

Markup

<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">
      Firstname Lastname
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="govuk-summary-list__value">
      13/08/1980
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Contact information
    </dt>
    <dd class="govuk-summary-list__value">
      <p class="govuk-body">
        email@email.com
      </p>
      <p class="govuk-body">
        Address line 1<br>
        Address line 2<br>
        Address line 3<br>
        Address line 4<br>
        Address line 5
      </p>
    </dd>
  </div>
</dl>

Macro

{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

{{ govukSummaryList({
  classes: "govuk-summary-list--no-border",
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Firstname Lastname"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "13/08/1980"
      }
    },
    {
      key: {
        text: "Contact information"
      },
      value: {
        html:
          '<p class="govuk-body">\n' +
          "  email@email.com\n" +
          "</p>\n" +
          '<p class="govuk-body">\n' +
          "  Address line 1<br>\n" +
          "  Address line 2<br>\n" +
          "  Address line 3<br>\n" +
          "  Address line 4<br>\n" +
          "  Address line 5\n" +
          "</p>\n"
      }
    }
  ]
}) }}

Summary list no-border on last row

Open this example in a new tab: summary list no-border on last row

Code

Markup

<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">
      Firstname Lastname
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="govuk-summary-list__value">
      13/08/1980
    </dd>
  </div>
  <div class="govuk-summary-list__row govuk-summary-list__row--no-border">
    <dt class="govuk-summary-list__key">
      Contact information
    </dt>
    <dd class="govuk-summary-list__value">
      <p class="govuk-body">
        email@email.com
      </p>
      <p class="govuk-body">
        Address line 1<br>
        Address line 2<br>
        Address line 3<br>
        Address line 4<br>
        Address line 5
      </p>
    </dd>
  </div>
</dl>

Macro

{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

{{ govukSummaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Firstname Lastname"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "13/08/1980"
      }
    },
    {
      key: {
        text: "Contact information"
      },
      value: {
        html:
          '<p class="govuk-body">\n' +
          "  email@email.com\n" +
          "</p>\n" +
          '<p class="govuk-body">\n' +
          "  Address line 1<br>\n" +
          "  Address line 2<br>\n" +
          "  Address line 3<br>\n" +
          "  Address line 4<br>\n" +
          "  Address line 5\n" +
          "</p>\n"
      },
      classes: "govuk-summary-list__row--no-border"
    }
  ]
}) }}

Summary list overridden-widths

Open this example in a new tab: summary list overridden-widths

Code

Markup

<dl class="govuk-summary-list">
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key govuk-!-width-one-half">
      Name
    </dt>
    <dd class="govuk-summary-list__value govuk-!-width-one-quarter">
      Firstname Lastname
    </dd>
    <dd class="govuk-summary-list__actions govuk-!-width-one-half">
      <ul class="govuk-summary-list__actions-list">
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Edit<span class="govuk-visually-hidden"> name</span></a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Delete<span class="govuk-visually-hidden"> name</span></a>
        </li>
      </ul>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="govuk-summary-list__value">
      13/08/1980
    </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">
      Contact information
    </dt>
    <dd class="govuk-summary-list__value">
      <p class="govuk-body">
        email@email.com
      </p>
      <p class="govuk-body">
        Address line 1<br>
        Address line 2<br>
        Address line 3<br>
        Address line 4<br>
        Address line 5
      </p>
    </dd>
    <dd class="govuk-summary-list__actions">
      <ul class="govuk-summary-list__actions-list">
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Edit<span class="govuk-visually-hidden"> contact information</span></a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> contact information</span></a>
        </li>
      </ul>
    </dd>
  </div>
</dl>

Macro

{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

{{ govukSummaryList({
  rows: [
    {
      key: {
        classes: "govuk-!-width-one-half",
        text: "Name"
      },
      value: {
        classes: "govuk-!-width-one-quarter",
        text: "Firstname Lastname"
      },
      actions: {
        classes: "govuk-!-width-one-half",
        items: [
          {
            href: "#",
            text: "Edit",
            visuallyHiddenText: "name"
          },
          {
            href: "#",
            text: "Delete",
            visuallyHiddenText: "name"
          }
        ]
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "13/08/1980"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "date of birth"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact information"
      },
      value: {
        html:
          '<p class="govuk-body">\n' +
          "  email@email.com\n" +
          "</p>\n" +
          '<p class="govuk-body">\n' +
          "  Address line 1<br>\n" +
          "  Address line 2<br>\n" +
          "  Address line 3<br>\n" +
          "  Address line 4<br>\n" +
          "  Address line 5\n" +
          "</p>\n"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Edit",
            visuallyHiddenText: "contact information"
          },
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "contact information"
          }
        ]
      }
    }
  ]
}) }}

Summary list check-your-answers

Open this example in a new tab: summary list check-your-answers

Code

Markup

<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">
      07700 900457<br>
      sarah.phillips@example.com
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> contact details</span></a>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Previous application number
    </dt>
    <dd class="govuk-summary-list__value">
      502135326
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> previous application number</span></a>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Licence type
    </dt>
    <dd class="govuk-summary-list__value">
      For personal use
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> licence type</span></a>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Home address
    </dt>
    <dd class="govuk-summary-list__value">
      <p class="govuk-body">
        72 Guild Street<br>
        London<br>
        SE23 6FH
      </p>
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> home address</span></a>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Licence period
    </dt>
    <dd class="govuk-summary-list__value">
      <p class="govuk-body">This is a longer paragraph of text provided by the user to provide additional information.</p>
      <p class="govuk-body">This is a second paragraph of text provided by the user.</p>
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> licence period</span></a>
    </dd>
  </div>
</dl>

Macro

{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

{{ govukSummaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Sarah Philips"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "name"
          }
        ]
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "5 January 1978"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "date of birth"
          }
        ]
      }
    },
    {
      key: {
        text: "Address"
      },
      value: {
        html: "72 Guild Street<br>\nLondon<br>\nSE23 6FH\n"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "address"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact details"
      },
      value: {
        html: "07700 900457<br>\nsarah.phillips@example.com\n"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "contact details"
          }
        ]
      }
    },
    {
      key: {
        text: "Previous application number"
      },
      value: {
        text: 502135326
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "previous application number"
          }
        ]
      }
    },
    {
      key: {
        text: "Licence type"
      },
      value: {
        text: "For personal use"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "licence type"
          }
        ]
      }
    },
    {
      key: {
        text: "Home address"
      },
      value: {
        html:
          '<p class="govuk-body">\n' +
          "  72 Guild Street<br>\n" +
          "  London<br>\n" +
          "  SE23 6FH\n" +
          "</p>\n"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "home address"
          }
        ]
      }
    },
    {
      key: {
        text: "Licence period"
      },
      value: {
        html:
          '<p class="govuk-body">This is a longer paragraph of text provided by the user to provide additional information.</p>\n' +
          '<p class="govuk-body">This is a second paragraph of text provided by the user.</p>\n'
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "licence period"
          }
        ]
      }
    }
  ]
}) }}

Summary list extreme

Open this example in a new tab: summary list extreme

Code

Markup

<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">
      Barnaby Marmaduke Aloysius Benjy Cobweb Dartagnan Egbert Felix Gaspar Humbert Ignatius Jayden Kasper Leroy Maximilian Neddy Obiajulu Pepin Quilliam Rosencrantz Sexton Teddy Upwood Vivatma Wayland Xylon Yardley Zachary Usansky
    </dd>
    <dd class="govuk-summary-list__actions">
      <ul class="govuk-summary-list__actions-list">
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Buy</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Use</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Break</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Fix</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Trash</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Change</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Mail</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Upgrade</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Charge</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Point</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Zoom</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Press</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Snap</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Work</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Quick</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Erase</a>
        </li>
      </ul>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Long website address
    </dt>
    <dd class="govuk-summary-list__value">
      <a class="govuk-link" href="https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch">https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</a>
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> long website address</span></a>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Long email address
    </dt>
    <dd class="govuk-summary-list__value">
      <a class="govuk-link" href="mailto:webmaster@llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.com">webmaster@llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.com</a>
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> long email address</span></a>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      No wrapping allowed
    </dt>
    <dd class="govuk-summary-list__value">
      <p class="govuk-body" style="white-space: nowrap;">michelle.longish.name@example.com</p>
    </dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> no wrapping allowed</span></a>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Pneumonoultramicroscopicsilicovolcanoconiosis
    </dt>
    <dd class="govuk-summary-list__value">
      <p class="govuk-body">Pneumonoultramicroscopicsilicovolcanoconiosis is a word coined by the president of the National Puzzlers’ League as a synonym for the disease known as silicosis. It is the longest word in the English language published in a dictionary, the Oxford English Dictionary, which defines it as "an artificial long word said to mean a lung disease caused by inhaling very fine ash and sand dust."</p>
      <p class="govuk-body">Silicosis is a form of occupational lung disease caused by inhalation of crystalline silica dust, and is marked by inflammation and scarring in the form of nodular lesions in the upper lobes of the lungs. It is a type of pneumoconiosis.</p>
    </dd>
    <dd class="govuk-summary-list__actions">
      <ul class="govuk-summary-list__actions-list">
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Write</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Cut</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Paste</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Save</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Load</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Check</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Quick</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Rewrite</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Plug</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Play</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Burn</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Rip</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Drag and drop</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Zip</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Unzip</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Lock</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Fill</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Curl</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Find</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">View</a>
        </li>
      </ul>
    </dd>
  </div>
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">
      Its vanished trees, the trees that had made way for Gatsby’s house, Pneumonoultramicroscopicsilicovolcanoconiosis had once pandered in whispers to the last and greatest of all human dreams; for a transitory enchanted moment man must have held his breath in the presence of this continent, compelled into an aesthetic contemplation he neither understood nor desired, face to face for the last time in history with something commensurate to his capacity for wonder.
    </dt>
    <dd class="govuk-summary-list__value">
      The Great Gatsby
    </dd>
    <dd class="govuk-summary-list__actions">
      <ul class="govuk-summary-list__actions-list">
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Code</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Jam</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Unlock</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Surf</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Scroll</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Pose</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Click</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Cross</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Crack</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Twitch</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Update</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Name</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Read</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Tune</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Print</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Scan</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Send</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Fax</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Rename</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Touch</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Bring</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Pay</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Watch</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Turn</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Leave</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Stop</a>
        </li>
        <li class="govuk-summary-list__actions-list-item">
          <a class="govuk-link" href="#">Format</a>
        </li>
      </ul>
    </dd>
  </div>
</dl>

Macro

{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

{{ govukSummaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Barnaby Marmaduke Aloysius Benjy Cobweb Dartagnan Egbert Felix Gaspar Humbert Ignatius Jayden Kasper Leroy Maximilian Neddy Obiajulu Pepin Quilliam Rosencrantz Sexton Teddy Upwood Vivatma Wayland Xylon Yardley Zachary Usansky"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Buy"
          },
          {
            href: "#",
            text: "Use"
          },
          {
            href: "#",
            text: "Break"
          },
          {
            href: "#",
            text: "Fix"
          },
          {
            href: "#",
            text: "Trash"
          },
          {
            href: "#",
            text: "Change"
          },
          {
            href: "#",
            text: "Mail"
          },
          {
            href: "#",
            text: "Upgrade"
          },
          {
            href: "#",
            text: "Charge"
          },
          {
            href: "#",
            text: "Point"
          },
          {
            href: "#",
            text: "Zoom"
          },
          {
            href: "#",
            text: "Press"
          },
          {
            href: "#",
            text: "Snap"
          },
          {
            href: "#",
            text: "Work"
          },
          {
            href: "#",
            text: "Quick"
          },
          {
            href: "#",
            text: "Erase"
          }
        ]
      }
    },
    {
      key: {
        text: "Long website address"
      },
      value: {
        html: '<a class="govuk-link" href="https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch">https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</a>\n'
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "long website address"
          }
        ]
      }
    },
    {
      key: {
        text: "Long email address"
      },
      value: {
        html: '<a class="govuk-link" href="mailto:webmaster@llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.com">webmaster@llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.com</a>\n'
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "long email address"
          }
        ]
      }
    },
    {
      key: {
        text: "No wrapping allowed"
      },
      value: {
        html: '<p class="govuk-body" style="white-space: nowrap;">michelle.longish.name@example.com</p>\n'
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "no wrapping allowed"
          }
        ]
      }
    },
    {
      key: {
        text: "Pneumonoultramicroscopicsilicovolcanoconiosis"
      },
      value: {
        html:
          '<p class="govuk-body">Pneumonoultramicroscopicsilicovolcanoconiosis is a word coined by the president of the National Puzzlers’ League as a synonym for the disease known as silicosis. It is the longest word in the English language published in a dictionary, the Oxford English Dictionary, which defines it as "an artificial long word said to mean a lung disease caused by inhaling very fine ash and sand dust."</p>\n' +
          '<p class="govuk-body">Silicosis is a form of occupational lung disease caused by inhalation of crystalline silica dust, and is marked by inflammation and scarring in the form of nodular lesions in the upper lobes of the lungs. It is a type of pneumoconiosis.</p>\n'
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Write"
          },
          {
            href: "#",
            text: "Cut"
          },
          {
            href: "#",
            text: "Paste"
          },
          {
            href: "#",
            text: "Save"
          },
          {
            href: "#",
            text: "Load"
          },
          {
            href: "#",
            text: "Check"
          },
          {
            href: "#",
            text: "Quick"
          },
          {
            href: "#",
            text: "Rewrite"
          },
          {
            href: "#",
            text: "Plug"
          },
          {
            href: "#",
            text: "Play"
          },
          {
            href: "#",
            text: "Burn"
          },
          {
            href: "#",
            text: "Rip"
          },
          {
            href: "#",
            text: "Drag and drop"
          },
          {
            href: "#",
            text: "Zip"
          },
          {
            href: "#",
            text: "Unzip"
          },
          {
            href: "#",
            text: "Lock"
          },
          {
            href: "#",
            text: "Fill"
          },
          {
            href: "#",
            text: "Curl"
          },
          {
            href: "#",
            text: "Find"
          },
          {
            href: "#",
            text: "View"
          }
        ]
      }
    },
    {
      key: {
        text: "Its vanished trees, the trees that had made way for Gatsby’s house, Pneumonoultramicroscopicsilicovolcanoconiosis had once pandered in whispers to the last and greatest of all human dreams; for a transitory enchanted moment man must have held his breath in the presence of this continent, compelled into an aesthetic contemplation he neither understood nor desired, face to face for the last time in history with something commensurate to his capacity for wonder."
      },
      value: {
        text: "The Great Gatsby"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Code"
          },
          {
            href: "#",
            text: "Jam"
          },
          {
            href: "#",
            text: "Unlock"
          },
          {
            href: "#",
            text: "Surf"
          },
          {
            href: "#",
            text: "Scroll"
          },
          {
            href: "#",
            text: "Pose"
          },
          {
            href: "#",
            text: "Click"
          },
          {
            href: "#",
            text: "Cross"
          },
          {
            href: "#",
            text: "Crack"
          },
          {
            href: "#",
            text: "Twitch"
          },
          {
            href: "#",
            text: "Update"
          },
          {
            href: "#",
            text: "Name"
          },
          {
            href: "#",
            text: "Read"
          },
          {
            href: "#",
            text: "Tune"
          },
          {
            href: "#",
            text: "Print"
          },
          {
            href: "#",
            text: "Scan"
          },
          {
            href: "#",
            text: "Send"
          },
          {
            href: "#",
            text: "Fax"
          },
          {
            href: "#",
            text: "Rename"
          },
          {
            href: "#",
            text: "Touch"
          },
          {
            href: "#",
            text: "Bring"
          },
          {
            href: "#",
            text: "Pay"
          },
          {
            href: "#",
            text: "Watch"
          },
          {
            href: "#",
            text: "Turn"
          },
          {
            href: "#",
            text: "Leave"
          },
          {
            href: "#",
            text: "Stop"
          },
          {
            href: "#",
            text: "Format"
          }
        ]
      }
    }
  ]
}) }}

Summary list as a summary card with a text header

Open this example in a new tab: summary list as a summary card with a text header

Code

Markup

<div class="govuk-summary-card">
  <div class="govuk-summary-card__title-wrapper">
    <h2 class="govuk-summary-card__title">
      Undergraduate teaching assistant
    </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">
          Name
        </dt>
        <dd class="govuk-summary-list__value">
          Firstname Lastname
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Date of birth
        </dt>
        <dd class="govuk-summary-list__value">
          13/08/1980
        </dd>
      </div>
    </dl>
  </div>
</div>

Macro

{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

{{ govukSummaryList({
  card: {
    title: {
      text: "Undergraduate teaching assistant"
    }
  },
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Firstname Lastname"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "13/08/1980"
      }
    }
  ]
}) }}

Summary list as a summary card with a custom header level

Open this example in a new tab: summary list as a summary card with a custom header level

Code

Markup

<div class="govuk-summary-card">
  <div class="govuk-summary-card__title-wrapper">
    <h3 class="govuk-summary-card__title">
      Undergraduate teaching assistant
    </h3>
  </div>

  <div class="govuk-summary-card__content">
    <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">
          Firstname Lastname
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Date of birth
        </dt>
        <dd class="govuk-summary-list__value">
          13/08/1980
        </dd>
      </div>
    </dl>
  </div>
</div>

Macro

{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

{{ govukSummaryList({
  card: {
    title: {
      text: "Undergraduate teaching assistant",
      headingLevel: 3
    }
  },
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Firstname Lastname"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "13/08/1980"
      }
    }
  ]
}) }}

Summary list as a summary card with a html header

Open this example in a new tab: summary list as a summary card with a html header

Code

Markup

<div class="govuk-summary-card">
  <div class="govuk-summary-card__title-wrapper">
    <h2 class="govuk-summary-card__title">
      <em>Undergraduate teaching assistant</em>
    </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">
          Name
        </dt>
        <dd class="govuk-summary-list__value">
          Firstname Lastname
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Date of birth
        </dt>
        <dd class="govuk-summary-list__value">
          13/08/1980
        </dd>
      </div>
    </dl>
  </div>
</div>

Macro

{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

{{ govukSummaryList({
  card: {
    title: {
      html: "<em>Undergraduate teaching assistant</em>"
    }
  },
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Firstname Lastname"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "13/08/1980"
      }
    }
  ]
}) }}

Summary list as a summary card with actions

Open this example in a new tab: summary list as a summary card with actions

Code

Markup

<div class="govuk-summary-card">
  <div class="govuk-summary-card__title-wrapper">
    <h2 class="govuk-summary-card__title">
      Undergraduate teaching assistant
    </h2>
    <ul class="govuk-summary-card__actions">
      <li class="govuk-summary-card__action">
        <a class="govuk-link" href="#">Delete job history<span class="govuk-visually-hidden"> (Undergraduate teaching assistant)</span></a>
      </li>
      <li class="govuk-summary-card__action">
        <a class="govuk-link" href="#">Withdraw job history<span class="govuk-visually-hidden"> (Undergraduate teaching assistant)</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">
          Name
        </dt>
        <dd class="govuk-summary-list__value">
          Firstname Lastname
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Date of birth
        </dt>
        <dd class="govuk-summary-list__value">
          13/08/1980
        </dd>
      </div>
    </dl>
  </div>
</div>

Macro

{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

{{ govukSummaryList({
  card: {
    title: {
      text: "Undergraduate teaching assistant"
    },
    actions: {
      items: [
        {
          text: "Delete job history",
          href: "#"
        },
        {
          text: "Withdraw job history",
          href: "#"
        }
      ]
    }
  },
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Firstname Lastname"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "13/08/1980"
      }
    }
  ]
}) }}

Summary list as a summary card with actions plus summary list actions

Open this example in a new tab: summary list as a summary card with actions plus summary list actions

Code

Markup

<div class="govuk-summary-card">
  <div class="govuk-summary-card__title-wrapper">
    <h2 class="govuk-summary-card__title">
      Undergraduate teaching assistant
    </h2>
    <ul class="govuk-summary-card__actions">
      <li class="govuk-summary-card__action">
        <a class="govuk-link" href="#">Delete job history<span class="govuk-visually-hidden"> (Undergraduate teaching assistant)</span></a>
      </li>
      <li class="govuk-summary-card__action">
        <a class="govuk-link" href="#">Withdraw job history<span class="govuk-visually-hidden"> (Undergraduate teaching assistant)</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">
          Name
        </dt>
        <dd class="govuk-summary-list__value">
          Firstname Lastname
        </dd>
        <dd class="govuk-summary-list__actions">
          <ul class="govuk-summary-list__actions-list">
            <li class="govuk-summary-list__actions-list-item">
              <a class="govuk-link" href="#">Edit<span class="govuk-visually-hidden"> name (Undergraduate teaching assistant)</span></a>
            </li>
            <li class="govuk-summary-list__actions-list-item">
              <a class="govuk-link" href="#">Delete<span class="govuk-visually-hidden"> name (Undergraduate teaching assistant)</span></a>
            </li>
          </ul>
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Date of birth
        </dt>
        <dd class="govuk-summary-list__value">
          13/08/1980
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> date of birth (Undergraduate teaching assistant)</span></a>
        </dd>
      </div>
    </dl>
  </div>
</div>

Macro

{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

{{ govukSummaryList({
  card: {
    title: {
      text: "Undergraduate teaching assistant"
    },
    actions: {
      items: [
        {
          text: "Delete job history",
          href: "#"
        },
        {
          text: "Withdraw job history",
          href: "#"
        }
      ]
    }
  },
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Firstname Lastname"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Edit",
            visuallyHiddenText: "name"
          },
          {
            href: "#",
            text: "Delete",
            visuallyHiddenText: "name"
          }
        ]
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "13/08/1980"
      },
      actions: {
        items: [
          {
            href: "#",
            text: "Change",
            visuallyHiddenText: "date of birth"
          }
        ]
      }
    }
  ]
}) }}