Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

Summary list

These examples are used for automated tests and may not follow service manual best practice.

Summary list default

Open this example in a new tab: Summary list default

Name
Karen Francis
Date of birth
15 March 1984
Contact information
73 Roman Rd
Leeds
LS2 5ZN
Contact details

07700 900362

karen.francis@example.com

Code

Markup

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

Macro

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

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

Summary list with actions

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

Name
Karen Francis
Change name
Date of birth
15 March 1984
Change date of birth
Contact information
73 Roman Rd
Leeds
LS2 5ZN
Change contact information
Contact details

07700 900362

karen.francis@example.com

Change contact details
Code

Markup

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

Macro

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

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

Summary list with actions as buttons

Open this example in a new tab: Summary list with actions as buttons

Name
Karen Francis
Date of birth
15 March 1984
Contact information
73 Roman Rd
Leeds
LS2 5ZN
Contact details

07700 900362

karen.francis@example.com

Code

Markup

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

Macro

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

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

Summary list with multiple actions

Open this example in a new tab: Summary list with multiple actions

Name
Karen Francis
Date of birth
15 March 1984
Change date of birth
Contact information
73 Roman Rd
Leeds
LS2 5ZN
Change contact information
Contact details

07700 900362

karen.francis@example.com

Medicines

Isotretinoin capsules (Roaccutane)

Isotretinoin gel (Isotrex)

Pepto-Bismol (bismuth subsalicylate)

Code

Markup

<dl class="nhsuk-summary-list">
  <div class="nhsuk-summary-list__row nhsuk-summary-list__row--no-actions">
    <dt class="nhsuk-summary-list__key">
      Name
    </dt>
    <dd class="nhsuk-summary-list__value">
      Karen Francis
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="nhsuk-summary-list__value">
      15 March 1984
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <a class="nhsuk-link" href="#/change">Change<span class="nhsuk-u-visually-hidden"> date of birth</span></a>
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Contact information
    </dt>
    <dd class="nhsuk-summary-list__value">
      73 Roman Rd<br>
      Leeds<br>
      LS2 5ZN
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <a class="nhsuk-link" href="#/change">Change<span class="nhsuk-u-visually-hidden"> contact information</span></a>
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Contact details
    </dt>
    <dd class="nhsuk-summary-list__value">
      <p>07700 900362</p>
      <p>karen.francis@example.com</p>
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <ul class="nhsuk-summary-list__actions-list">
        <li class="nhsuk-summary-list__actions-list-item">
          <a class="nhsuk-link" href="#/add">Add<span class="nhsuk-u-visually-hidden"> new contact details</span></a>
        </li>
        <li class="nhsuk-summary-list__actions-list-item">
          <a class="nhsuk-link" href="#/change">Change<span class="nhsuk-u-visually-hidden"> contact details</span></a>
        </li>
      </ul>
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Medicines
    </dt>
    <dd class="nhsuk-summary-list__value">
      <p>Isotretinoin capsules (Roaccutane)</p>
      <p>Isotretinoin gel (Isotrex)</p>
      <p>Pepto-Bismol (bismuth subsalicylate)</p>
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <ul class="nhsuk-summary-list__actions-list">
        <li class="nhsuk-summary-list__actions-list-item">
          <a class="nhsuk-link" href="#/add">Add<span class="nhsuk-u-visually-hidden"> new medicine</span></a>
        </li>
        <li class="nhsuk-summary-list__actions-list-item">
          <a class="nhsuk-link" href="#/change">Change<span class="nhsuk-u-visually-hidden"> medicines</span></a>
        </li>
      </ul>
    </dd>
  </div>
</dl>

Macro

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

{{ summaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "15 March 1984"
      },
      actions: {
        items: [
          {
            href: "#/change",
            text: "Change",
            visuallyHiddenText: "date of birth"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact information"
      },
      value: {
        html: "73 Roman Rd<br>\nLeeds<br>\nLS2 5ZN"
      },
      actions: {
        items: [
          {
            href: "#/change",
            text: "Change",
            visuallyHiddenText: "contact information"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact details"
      },
      value: {
        html: "<p>07700 900362</p>\n<p>karen.francis@example.com</p>"
      },
      actions: {
        items: [
          {
            href: "#/add",
            text: "Add",
            visuallyHiddenText: "new contact details"
          },
          {
            href: "#/change",
            text: "Change",
            visuallyHiddenText: "contact details"
          }
        ]
      }
    },
    {
      key: {
        text: "Medicines"
      },
      value: {
        html: "<p>Isotretinoin capsules (Roaccutane)</p>\n<p>Isotretinoin gel (Isotrex)</p>\n<p>Pepto-Bismol (bismuth subsalicylate)</p>"
      },
      actions: {
        items: [
          {
            href: "#/add",
            text: "Add",
            visuallyHiddenText: "new medicine"
          },
          {
            href: "#/change",
            text: "Change",
            visuallyHiddenText: "medicines"
          }
        ]
      }
    }
  ]
}) }}

Summary list with multiple actions as buttons

Open this example in a new tab: Summary list with multiple actions as buttons

Name
Karen Francis
Date of birth
15 March 1984
Contact information
73 Roman Rd
Leeds
LS2 5ZN
Contact details

07700 900362

karen.francis@example.com

Medicines

Isotretinoin capsules (Roaccutane)

Isotretinoin gel (Isotrex)

Pepto-Bismol (bismuth subsalicylate)

Code

Markup

<dl class="nhsuk-summary-list">
  <div class="nhsuk-summary-list__row nhsuk-summary-list__row--no-actions">
    <dt class="nhsuk-summary-list__key">
      Name
    </dt>
    <dd class="nhsuk-summary-list__value">
      Karen Francis
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="nhsuk-summary-list__value">
      15 March 1984
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <button class="nhsuk-link" type="submit">Change<span class="nhsuk-u-visually-hidden"> date of birth</span></button>
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Contact information
    </dt>
    <dd class="nhsuk-summary-list__value">
      73 Roman Rd<br>
      Leeds<br>
      LS2 5ZN
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <button class="nhsuk-link" type="submit">Change<span class="nhsuk-u-visually-hidden"> contact information</span></button>
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Contact details
    </dt>
    <dd class="nhsuk-summary-list__value">
      <p>07700 900362</p>
      <p>karen.francis@example.com</p>
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <ul class="nhsuk-summary-list__actions-list">
        <li class="nhsuk-summary-list__actions-list-item">
          <button class="nhsuk-link" type="submit">Add<span class="nhsuk-u-visually-hidden"> new contact details</span></button>
        </li>
        <li class="nhsuk-summary-list__actions-list-item">
          <button class="nhsuk-link" type="submit">Change<span class="nhsuk-u-visually-hidden"> contact details</span></button>
        </li>
      </ul>
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Medicines
    </dt>
    <dd class="nhsuk-summary-list__value">
      <p>Isotretinoin capsules (Roaccutane)</p>
      <p>Isotretinoin gel (Isotrex)</p>
      <p>Pepto-Bismol (bismuth subsalicylate)</p>
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <ul class="nhsuk-summary-list__actions-list">
        <li class="nhsuk-summary-list__actions-list-item">
          <button class="nhsuk-link" type="submit">Add<span class="nhsuk-u-visually-hidden"> new medicine</span></button>
        </li>
        <li class="nhsuk-summary-list__actions-list-item">
          <button class="nhsuk-link" type="submit">Change<span class="nhsuk-u-visually-hidden"> medicines</span></button>
        </li>
      </ul>
    </dd>
  </div>
</dl>

Macro

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

{{ summaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "15 March 1984"
      },
      actions: {
        items: [
          {
            element: "button",
            text: "Change",
            visuallyHiddenText: "date of birth"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact information"
      },
      value: {
        html: "73 Roman Rd<br>\nLeeds<br>\nLS2 5ZN"
      },
      actions: {
        items: [
          {
            element: "button",
            text: "Change",
            visuallyHiddenText: "contact information"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact details"
      },
      value: {
        html: "<p>07700 900362</p>\n<p>karen.francis@example.com</p>"
      },
      actions: {
        items: [
          {
            element: "button",
            text: "Add",
            visuallyHiddenText: "new contact details"
          },
          {
            element: "button",
            text: "Change",
            visuallyHiddenText: "contact details"
          }
        ]
      }
    },
    {
      key: {
        text: "Medicines"
      },
      value: {
        html: "<p>Isotretinoin capsules (Roaccutane)</p>\n<p>Isotretinoin gel (Isotrex)</p>\n<p>Pepto-Bismol (bismuth subsalicylate)</p>"
      },
      actions: {
        items: [
          {
            element: "button",
            text: "Add",
            visuallyHiddenText: "new medicine"
          },
          {
            element: "button",
            text: "Change",
            visuallyHiddenText: "medicines"
          }
        ]
      }
    }
  ]
}) }}

Summary list with multiple actions (empty items)

Open this example in a new tab: Summary list with multiple actions (empty items)

Name
Karen Francis
Date of birth
15 March 1984
Change date of birth
Contact information
73 Roman Rd
Leeds
LS2 5ZN
Change contact information
Contact details

07700 900362

karen.francis@example.com

Medicines

Isotretinoin capsules (Roaccutane)

Isotretinoin gel (Isotrex)

Pepto-Bismol (bismuth subsalicylate)

Code

Markup

<dl class="nhsuk-summary-list">
  <div class="nhsuk-summary-list__row nhsuk-summary-list__row--no-actions">
    <dt class="nhsuk-summary-list__key">
      Name
    </dt>
    <dd class="nhsuk-summary-list__value">
      Karen Francis
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Date of birth
    </dt>
    <dd class="nhsuk-summary-list__value">
      15 March 1984
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <a class="nhsuk-link" href="#/change">Change<span class="nhsuk-u-visually-hidden"> date of birth</span></a>
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Contact information
    </dt>
    <dd class="nhsuk-summary-list__value">
      73 Roman Rd<br>
      Leeds<br>
      LS2 5ZN
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <a class="nhsuk-link" href="#/change">Change<span class="nhsuk-u-visually-hidden"> contact information</span></a>
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Contact details
    </dt>
    <dd class="nhsuk-summary-list__value">
      <p>07700 900362</p>
      <p>karen.francis@example.com</p>
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <ul class="nhsuk-summary-list__actions-list">
        <li class="nhsuk-summary-list__actions-list-item">
          <a class="nhsuk-link" href="#/add">Add<span class="nhsuk-u-visually-hidden"> new contact details</span></a>
        </li>
        <li class="nhsuk-summary-list__actions-list-item">
          <a class="nhsuk-link" href="#/change">Change<span class="nhsuk-u-visually-hidden"> contact details</span></a>
        </li>
      </ul>
    </dd>
  </div>
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Medicines
    </dt>
    <dd class="nhsuk-summary-list__value">
      <p>Isotretinoin capsules (Roaccutane)</p>
      <p>Isotretinoin gel (Isotrex)</p>
      <p>Pepto-Bismol (bismuth subsalicylate)</p>
    </dd>
    <dd class="nhsuk-summary-list__actions">
      <ul class="nhsuk-summary-list__actions-list">
        <li class="nhsuk-summary-list__actions-list-item">
          <a class="nhsuk-link" href="#/add">Add<span class="nhsuk-u-visually-hidden"> new medicine</span></a>
        </li>
        <li class="nhsuk-summary-list__actions-list-item">
          <a class="nhsuk-link" href="#/change">Change<span class="nhsuk-u-visually-hidden"> medicines</span></a>
        </li>
      </ul>
    </dd>
  </div>
</dl>

Macro

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

{{ summaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "15 March 1984"
      },
      actions: {
        items: [
          false,
          {
            href: "#/change",
            text: "Change",
            visuallyHiddenText: "date of birth"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact information"
      },
      value: {
        html: "73 Roman Rd<br>\nLeeds<br>\nLS2 5ZN"
      },
      actions: {
        items: [
          false,
          {
            href: "#/change",
            text: "Change",
            visuallyHiddenText: "contact information"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact details"
      },
      value: {
        html: "<p>07700 900362</p>\n<p>karen.francis@example.com</p>"
      },
      actions: {
        items: [
          {
            href: "#/add",
            text: "Add",
            visuallyHiddenText: "new contact details"
          },
          {
            href: "#/change",
            text: "Change",
            visuallyHiddenText: "contact details"
          }
        ]
      }
    },
    {
      key: {
        text: "Medicines"
      },
      value: {
        html: "<p>Isotretinoin capsules (Roaccutane)</p>\n<p>Isotretinoin gel (Isotrex)</p>\n<p>Pepto-Bismol (bismuth subsalicylate)</p>"
      },
      actions: {
        items: [
          {
            href: "#/add",
            text: "Add",
            visuallyHiddenText: "new medicine"
          },
          {
            href: "#/change",
            text: "Change",
            visuallyHiddenText: "medicines"
          }
        ]
      }
    }
  ]
}) }}

Summary list without border

Open this example in a new tab: Summary list without border

Name
Karen Francis
Date of birth
15 March 1984
Contact information
73 Roman Rd
Leeds
LS2 5ZN
Contact details

07700 900362

karen.francis@example.com

Code

Markup

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

Macro

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

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

Summary list without last row border

Open this example in a new tab: Summary list without last row border

Name
Karen Francis
Date of birth
15 March 1984
Contact information
73 Roman Rd
Leeds
LS2 5ZN
Contact details

07700 900362

karen.francis@example.com

Code

Markup

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

Macro

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

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

Summary list without specific row border

Open this example in a new tab: Summary list without specific row border

Name
Karen Francis
Date of birth
15 March 1984
Contact information
73 Roman Rd
Leeds
LS2 5ZN
Contact details

07700 900362

karen.francis@example.com

Code

Markup

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

Macro

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

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

Summary list as a card

Open this example in a new tab: Summary list as a card

Regional Manager

Name
Karen Francis
Date of birth
15 March 1984
Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Regional Manager
    </h2>
    <dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Name
        </dt>
        <dd class="nhsuk-summary-list__value">
          Karen Francis
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Date of birth
        </dt>
        <dd class="nhsuk-summary-list__value">
          15 March 1984
        </dd>
      </div>
    </dl>
  </div>
</div>

Macro

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

{{ summaryList({
  card: {
    heading: "Regional Manager",
    headingSize: "m"
  },
  lastRowBorder: false,
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "15 March 1984"
      }
    }
  ]
}) }}

Summary list as a card (clickable) without actions

Open this example in a new tab: Summary list as a card (clickable) without actions

Regional Manager

Name
Karen Francis
Date of birth
15 March 1984
Code

Markup

<div class="nhsuk-card nhsuk-card--clickable">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      <a class="nhsuk-card__link" href="#/card-clickable">Regional Manager</a>
    </h2>
    <dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Name
        </dt>
        <dd class="nhsuk-summary-list__value">
          Karen Francis
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Date of birth
        </dt>
        <dd class="nhsuk-summary-list__value">
          15 March 1984
        </dd>
      </div>
    </dl>
  </div>
</div>

Macro

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

{{ summaryList({
  card: {
    heading: "Regional Manager",
    headingSize: "m",
    href: "#/card-clickable",
    clickable: true
  },
  lastRowBorder: false,
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "15 March 1984"
      }
    }
  ]
}) }}

Summary list as a card (feature) with actions

Open this example in a new tab: Summary list as a card (feature) with actions

Regional Manager

Name
Karen Francis
Date of birth
15 March 1984
Code

Markup

<div class="nhsuk-card nhsuk-card--feature">
  <div class="nhsuk-card__heading-container">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Regional Manager
    </h2>
    <ul class="nhsuk-card__actions">
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#/delete">Delete<span class="nhsuk-u-visually-hidden"> (Regional Manager)</span></a>
      </li>
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#/withdraw">Withdraw<span class="nhsuk-u-visually-hidden"> (Regional Manager)</span></a>
      </li>
    </ul>
  </div>
  <div class="nhsuk-card__content">
    <dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Name
        </dt>
        <dd class="nhsuk-summary-list__value">
          Karen Francis
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Date of birth
        </dt>
        <dd class="nhsuk-summary-list__value">
          15 March 1984
        </dd>
      </div>
    </dl>
  </div>
</div>

Macro

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

{{ summaryList({
  card: {
    heading: "Regional Manager",
    headingSize: "m",
    variant: "feature",
    actions: {
      items: [
        {
          text: "Delete",
          href: "#/delete"
        },
        {
          text: "Withdraw",
          href: "#/withdraw"
        }
      ]
    }
  },
  lastRowBorder: false,
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "15 March 1984"
      }
    }
  ]
}) }}

Summary list as a card (feature) with custom HTML

Open this example in a new tab: Summary list as a card (feature) with custom HTML

Your read

Opinion

Recall for assessment

Change opinion (Your read)
Detailed opinion

Right breast

Abnormal

Left breast

Not recorded

Change detailed opinion (Your read)
Annotations

Right breast

Microcalcification outside a mass, Clinical abnormality – Level 2 (benign)

Change annotations (Your read)
Code

Markup

<div class="nhsuk-card nhsuk-card--feature">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Your read
    </h2>
    <dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Opinion
        </dt>
        <dd class="nhsuk-summary-list__value">
          <p class="nhsuk-u-margin-bottom-3">
            <strong class="nhsuk-tag nhsuk-tag--red">
            Recall for assessment
          </strong>
          
          </p>
        </dd>
        <dd class="nhsuk-summary-list__actions">
          <a class="nhsuk-link" href="#/change">Change<span class="nhsuk-u-visually-hidden"> opinion (Your read)</span></a>
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Detailed opinion
        </dt>
        <dd class="nhsuk-summary-list__value">
          <div class="nhsuk-grid-row">
            <div class="nhsuk-grid-column-one-half">
              <p class="nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold">
                Right breast
              </p>
              <p class="nhsuk-u-margin-bottom-3">
                <strong class="nhsuk-tag nhsuk-tag--red">
            Abnormal
          </strong>
          
              </p>
            </div>
          
            <div class="nhsuk-grid-column-one-half">
              <p class="nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold">
                Left breast
              </p>
              <p class="nhsuk-u-margin-bottom-3 nhsuk-u-secondary-text-colour">
                Not recorded
              </p>
            </div>
          </div>
        </dd>
        <dd class="nhsuk-summary-list__actions">
          <a class="nhsuk-link" href="#/change">Change<span class="nhsuk-u-visually-hidden"> detailed opinion (Your read)</span></a>
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Annotations
        </dt>
        <dd class="nhsuk-summary-list__value">
          <p class="nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold">
            Right breast
          </p>
          <p class="nhsuk-u-margin-bottom-0">
            Microcalcification outside a mass, Clinical abnormality – Level 2 (benign)
          </p>
        </dd>
        <dd class="nhsuk-summary-list__actions">
          <a class="nhsuk-link" href="#/change">Change<span class="nhsuk-u-visually-hidden"> annotations (Your read)</span></a>
        </dd>
      </div>
    </dl>
  </div>
</div>

Macro

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

{{ summaryList({
  card: {
    heading: "Your read",
    headingSize: "m",
    variant: "feature"
  },
  lastRowBorder: false,
  rows: [
    {
      key: {
        text: "Opinion"
      },
      value: {
        html: '<p class="nhsuk-u-margin-bottom-3">\n  <strong class="nhsuk-tag nhsuk-tag--red">\n  Recall for assessment\n</strong>\n\n</p>'
      },
      actions: {
        items: [
          {
            href: "#/change",
            text: "Change",
            visuallyHiddenText: "opinion"
          }
        ]
      }
    },
    {
      key: {
        text: "Detailed opinion"
      },
      value: {
        html: '<div class="nhsuk-grid-row">\n  <div class="nhsuk-grid-column-one-half">\n    <p class="nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold">\n      Right breast\n    </p>\n    <p class="nhsuk-u-margin-bottom-3">\n      <strong class="nhsuk-tag nhsuk-tag--red">\n  Abnormal\n</strong>\n\n    </p>\n  </div>\n\n  <div class="nhsuk-grid-column-one-half">\n    <p class="nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold">\n      Left breast\n    </p>\n    <p class="nhsuk-u-margin-bottom-3 nhsuk-u-secondary-text-colour">\n      Not recorded\n    </p>\n  </div>\n</div>'
      },
      actions: {
        items: [
          {
            href: "#/change",
            text: "Change",
            visuallyHiddenText: "detailed opinion"
          }
        ]
      }
    },
    {
      key: {
        text: "Annotations"
      },
      value: {
        html: '<p class="nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold">\n  Right breast\n</p>\n<p class="nhsuk-u-margin-bottom-0">\n  Microcalcification outside a mass, Clinical abnormality – Level 2 (benign)\n</p>'
      },
      actions: {
        items: [
          {
            href: "#/change",
            text: "Change",
            visuallyHiddenText: "annotations"
          }
        ]
      }
    }
  ]
}) }}

Summary list as a card (secondary) with actions

Open this example in a new tab: Summary list as a card (secondary) with actions

Regional Manager

Name
Karen Francis
Date of birth
15 March 1984
Code

Markup

<div class="nhsuk-card nhsuk-card--secondary">
  <div class="nhsuk-card__heading-container">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Regional Manager
    </h2>
    <ul class="nhsuk-card__actions">
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#/delete">Delete<span class="nhsuk-u-visually-hidden"> (Regional Manager)</span></a>
      </li>
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#/withdraw">Withdraw<span class="nhsuk-u-visually-hidden"> (Regional Manager)</span></a>
      </li>
    </ul>
  </div>
  <div class="nhsuk-card__content">
    <dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Name
        </dt>
        <dd class="nhsuk-summary-list__value">
          Karen Francis
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Date of birth
        </dt>
        <dd class="nhsuk-summary-list__value">
          15 March 1984
        </dd>
      </div>
    </dl>
  </div>
</div>

Macro

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

{{ summaryList({
  card: {
    heading: "Regional Manager",
    headingSize: "m",
    variant: "secondary",
    actions: {
      items: [
        {
          text: "Delete",
          href: "#/delete"
        },
        {
          text: "Withdraw",
          href: "#/withdraw"
        }
      ]
    }
  },
  lastRowBorder: false,
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "15 March 1984"
      }
    }
  ]
}) }}

Summary list as a card (type emergency) with actions

Open this example in a new tab: Summary list as a card (type emergency) with actions

Immediate action required: Regional Manager

Name
Karen Francis
Date of birth
15 March 1984
Code

Markup

<div class="nhsuk-card nhsuk-card--care nhsuk-card--care--emergency">
  <div class="nhsuk-card__heading-container">
    <h2 class="nhsuk-card__heading">
      <span role="text">
        <span class="nhsuk-u-visually-hidden">Immediate action required:</span> Regional Manager
      </span>
    </h2>
    <span class="nhsuk-card--care__arrow" aria-hidden="true"></span>
    <ul class="nhsuk-card__actions">
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#/delete">Delete<span class="nhsuk-u-visually-hidden"> (Regional Manager)</span></a>
      </li>
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#/withdraw">Withdraw<span class="nhsuk-u-visually-hidden"> (Regional Manager)</span></a>
      </li>
    </ul>
  </div>
  <div class="nhsuk-card__content">
    <dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Name
        </dt>
        <dd class="nhsuk-summary-list__value">
          Karen Francis
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Date of birth
        </dt>
        <dd class="nhsuk-summary-list__value">
          15 March 1984
        </dd>
      </div>
    </dl>
  </div>
</div>

Macro

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

{{ summaryList({
  card: {
    heading: "Regional Manager",
    variant: "emergency",
    actions: {
      items: [
        {
          text: "Delete",
          href: "#/delete"
        },
        {
          text: "Withdraw",
          href: "#/withdraw"
        }
      ]
    }
  },
  lastRowBorder: false,
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "15 March 1984"
      }
    }
  ]
}) }}

Summary list as a card (type non-urgent) with actions

Open this example in a new tab: Summary list as a card (type non-urgent) with actions

Non-urgent advice: Regional Manager

Name
Karen Francis
Date of birth
15 March 1984
Code

Markup

<div class="nhsuk-card nhsuk-card--care nhsuk-card--care--non-urgent">
  <div class="nhsuk-card__heading-container">
    <h2 class="nhsuk-card__heading">
      <span role="text">
        <span class="nhsuk-u-visually-hidden">Non-urgent advice:</span> Regional Manager
      </span>
    </h2>
    <span class="nhsuk-card--care__arrow" aria-hidden="true"></span>
    <ul class="nhsuk-card__actions">
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#/delete">Delete<span class="nhsuk-u-visually-hidden"> (Regional Manager)</span></a>
      </li>
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#/withdraw">Withdraw<span class="nhsuk-u-visually-hidden"> (Regional Manager)</span></a>
      </li>
    </ul>
  </div>
  <div class="nhsuk-card__content">
    <dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Name
        </dt>
        <dd class="nhsuk-summary-list__value">
          Karen Francis
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Date of birth
        </dt>
        <dd class="nhsuk-summary-list__value">
          15 March 1984
        </dd>
      </div>
    </dl>
  </div>
</div>

Macro

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

{{ summaryList({
  card: {
    heading: "Regional Manager",
    variant: "non-urgent",
    actions: {
      items: [
        {
          text: "Delete",
          href: "#/delete"
        },
        {
          text: "Withdraw",
          href: "#/withdraw"
        }
      ]
    }
  },
  lastRowBorder: false,
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "15 March 1984"
      }
    }
  ]
}) }}

Summary list as a card (type urgent) with actions

Open this example in a new tab: Summary list as a card (type urgent) with actions

Urgent advice: Regional Manager

Name
Karen Francis
Date of birth
15 March 1984
Code

Markup

<div class="nhsuk-card nhsuk-card--care nhsuk-card--care--urgent">
  <div class="nhsuk-card__heading-container">
    <h2 class="nhsuk-card__heading">
      <span role="text">
        <span class="nhsuk-u-visually-hidden">Urgent advice:</span> Regional Manager
      </span>
    </h2>
    <span class="nhsuk-card--care__arrow" aria-hidden="true"></span>
    <ul class="nhsuk-card__actions">
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#/delete">Delete<span class="nhsuk-u-visually-hidden"> (Regional Manager)</span></a>
      </li>
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#/withdraw">Withdraw<span class="nhsuk-u-visually-hidden"> (Regional Manager)</span></a>
      </li>
    </ul>
  </div>
  <div class="nhsuk-card__content">
    <dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Name
        </dt>
        <dd class="nhsuk-summary-list__value">
          Karen Francis
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Date of birth
        </dt>
        <dd class="nhsuk-summary-list__value">
          15 March 1984
        </dd>
      </div>
    </dl>
  </div>
</div>

Macro

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

{{ summaryList({
  card: {
    heading: "Regional Manager",
    variant: "urgent",
    actions: {
      items: [
        {
          text: "Delete",
          href: "#/delete"
        },
        {
          text: "Withdraw",
          href: "#/withdraw"
        }
      ]
    }
  },
  lastRowBorder: false,
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "15 March 1984"
      }
    }
  ]
}) }}

Summary list as a card with action

Open this example in a new tab: Summary list as a card with action

Regional Manager

Delete (Regional Manager)
Name
Karen Francis
Date of birth
15 March 1984
Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__heading-container">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Regional Manager
    </h2>
    <div class="nhsuk-card__actions">
      <a class="nhsuk-link" href="#/delete">Delete<span class="nhsuk-u-visually-hidden"> (Regional Manager)</span></a>
    </div>
  </div>
  <div class="nhsuk-card__content">
    <dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Name
        </dt>
        <dd class="nhsuk-summary-list__value">
          Karen Francis
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Date of birth
        </dt>
        <dd class="nhsuk-summary-list__value">
          15 March 1984
        </dd>
      </div>
    </dl>
  </div>
</div>

Macro

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

{{ summaryList({
  card: {
    heading: "Regional Manager",
    headingSize: "m",
    actions: {
      items: [
        {
          text: "Delete",
          href: "#/delete"
        }
      ]
    }
  },
  lastRowBorder: false,
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "15 March 1984"
      }
    }
  ]
}) }}

Summary list as a card with action as a button

Open this example in a new tab: Summary list as a card with action as a button

Regional Manager

Name
Karen Francis
Date of birth
15 March 1984
Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__heading-container">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Regional Manager
    </h2>
    <div class="nhsuk-card__actions">
      <button class="nhsuk-link" type="submit">Delete<span class="nhsuk-u-visually-hidden"> (Regional Manager)</span></button>
    </div>
  </div>
  <div class="nhsuk-card__content">
    <dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Name
        </dt>
        <dd class="nhsuk-summary-list__value">
          Karen Francis
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Date of birth
        </dt>
        <dd class="nhsuk-summary-list__value">
          15 March 1984
        </dd>
      </div>
    </dl>
  </div>
</div>

Macro

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

{{ summaryList({
  card: {
    heading: "Regional Manager",
    headingSize: "m",
    actions: {
      items: [
        {
          element: "button",
          text: "Delete"
        }
      ]
    }
  },
  lastRowBorder: false,
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "15 March 1984"
      }
    }
  ]
}) }}

Summary list as a card with actions

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

Regional Manager

Name
Karen Francis
Date of birth
15 March 1984
Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__heading-container">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Regional Manager
    </h2>
    <ul class="nhsuk-card__actions">
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#/delete">Delete<span class="nhsuk-u-visually-hidden"> (Regional Manager)</span></a>
      </li>
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#/withdraw">Withdraw<span class="nhsuk-u-visually-hidden"> (Regional Manager)</span></a>
      </li>
    </ul>
  </div>
  <div class="nhsuk-card__content">
    <dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Name
        </dt>
        <dd class="nhsuk-summary-list__value">
          Karen Francis
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Date of birth
        </dt>
        <dd class="nhsuk-summary-list__value">
          15 March 1984
        </dd>
      </div>
    </dl>
  </div>
</div>

Macro

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

{{ summaryList({
  card: {
    heading: "Regional Manager",
    headingSize: "m",
    actions: {
      items: [
        {
          text: "Delete",
          href: "#/delete"
        },
        {
          text: "Withdraw",
          href: "#/withdraw"
        }
      ]
    }
  },
  lastRowBorder: false,
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "15 March 1984"
      }
    }
  ]
}) }}

Summary list as a card with actions as buttons

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

Regional Manager

Name
Karen Francis
Date of birth
15 March 1984
Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__heading-container">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Regional Manager
    </h2>
    <ul class="nhsuk-card__actions">
      <li class="nhsuk-card__action">
        <button class="nhsuk-link" type="submit">Delete<span class="nhsuk-u-visually-hidden"> (Regional Manager)</span></button>
      </li>
      <li class="nhsuk-card__action">
        <button class="nhsuk-link" type="submit">Withdraw<span class="nhsuk-u-visually-hidden"> (Regional Manager)</span></button>
      </li>
    </ul>
  </div>
  <div class="nhsuk-card__content">
    <dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Name
        </dt>
        <dd class="nhsuk-summary-list__value">
          Karen Francis
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Date of birth
        </dt>
        <dd class="nhsuk-summary-list__value">
          15 March 1984
        </dd>
      </div>
    </dl>
  </div>
</div>

Macro

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

{{ summaryList({
  card: {
    heading: "Regional Manager",
    headingSize: "m",
    actions: {
      items: [
        {
          element: "button",
          text: "Delete"
        },
        {
          element: "button",
          text: "Withdraw"
        }
      ]
    }
  },
  lastRowBorder: false,
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "15 March 1984"
      }
    }
  ]
}) }}

Summary list as a card with multiple actions

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

Regional Manager

Name
Karen Francis
Date of birth
15 March 1984
Change date of birth (Regional Manager)
Contact information
73 Roman Rd
Leeds
LS2 5ZN
Change contact information (Regional Manager)
Contact details

07700 900362

karen.francis@example.com

Medicines

Isotretinoin capsules (Roaccutane)

Isotretinoin gel (Isotrex)

Pepto-Bismol (bismuth subsalicylate)

Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__heading-container">
    <h2 class="nhsuk-card__heading nhsuk-heading-l">
      Regional Manager
    </h2>
    <ul class="nhsuk-card__actions">
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#/delete">Delete<span class="nhsuk-u-visually-hidden"> (Regional Manager)</span></a>
      </li>
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#/withdraw">Withdraw<span class="nhsuk-u-visually-hidden"> (Regional Manager)</span></a>
      </li>
    </ul>
  </div>
  <div class="nhsuk-card__content">
    <dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
      <div class="nhsuk-summary-list__row nhsuk-summary-list__row--no-actions">
        <dt class="nhsuk-summary-list__key">
          Name
        </dt>
        <dd class="nhsuk-summary-list__value">
          Karen Francis
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Date of birth
        </dt>
        <dd class="nhsuk-summary-list__value">
          15 March 1984
        </dd>
        <dd class="nhsuk-summary-list__actions">
          <a class="nhsuk-link" href="#/change">Change<span class="nhsuk-u-visually-hidden"> date of birth (Regional Manager)</span></a>
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Contact information
        </dt>
        <dd class="nhsuk-summary-list__value">
          73 Roman Rd<br>
          Leeds<br>
          LS2 5ZN
        </dd>
        <dd class="nhsuk-summary-list__actions">
          <a class="nhsuk-link" href="#/change">Change<span class="nhsuk-u-visually-hidden"> contact information (Regional Manager)</span></a>
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Contact details
        </dt>
        <dd class="nhsuk-summary-list__value">
          <p>07700 900362</p>
          <p>karen.francis@example.com</p>
        </dd>
        <dd class="nhsuk-summary-list__actions">
          <ul class="nhsuk-summary-list__actions-list">
            <li class="nhsuk-summary-list__actions-list-item">
              <a class="nhsuk-link" href="#/add">Add<span class="nhsuk-u-visually-hidden"> new contact details (Regional Manager)</span></a>
            </li>
            <li class="nhsuk-summary-list__actions-list-item">
              <a class="nhsuk-link" href="#/change">Change<span class="nhsuk-u-visually-hidden"> contact details (Regional Manager)</span></a>
            </li>
          </ul>
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Medicines
        </dt>
        <dd class="nhsuk-summary-list__value">
          <p>Isotretinoin capsules (Roaccutane)</p>
          <p>Isotretinoin gel (Isotrex)</p>
          <p>Pepto-Bismol (bismuth subsalicylate)</p>
        </dd>
        <dd class="nhsuk-summary-list__actions">
          <ul class="nhsuk-summary-list__actions-list">
            <li class="nhsuk-summary-list__actions-list-item">
              <a class="nhsuk-link" href="#/add">Add<span class="nhsuk-u-visually-hidden"> new medicine (Regional Manager)</span></a>
            </li>
            <li class="nhsuk-summary-list__actions-list-item">
              <a class="nhsuk-link" href="#/change">Change<span class="nhsuk-u-visually-hidden"> medicines (Regional Manager)</span></a>
            </li>
          </ul>
        </dd>
      </div>
    </dl>
  </div>
</div>

Macro

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

{{ summaryList({
  card: {
    heading: "Regional Manager",
    headingSize: "l",
    actions: {
      items: [
        {
          text: "Delete",
          href: "#/delete"
        },
        {
          text: "Withdraw",
          href: "#/withdraw"
        }
      ]
    }
  },
  lastRowBorder: false,
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Karen Francis"
      }
    },
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "15 March 1984"
      },
      actions: {
        items: [
          {
            href: "#/change",
            text: "Change",
            visuallyHiddenText: "date of birth"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact information"
      },
      value: {
        html: "73 Roman Rd<br>\nLeeds<br>\nLS2 5ZN"
      },
      actions: {
        items: [
          {
            href: "#/change",
            text: "Change",
            visuallyHiddenText: "contact information"
          }
        ]
      }
    },
    {
      key: {
        text: "Contact details"
      },
      value: {
        html: "<p>07700 900362</p>\n<p>karen.francis@example.com</p>"
      },
      actions: {
        items: [
          {
            href: "#/add",
            text: "Add",
            visuallyHiddenText: "new contact details"
          },
          {
            href: "#/change",
            text: "Change",
            visuallyHiddenText: "contact details"
          }
        ]
      }
    },
    {
      key: {
        text: "Medicines"
      },
      value: {
        html: "<p>Isotretinoin capsules (Roaccutane)</p>\n<p>Isotretinoin gel (Isotrex)</p>\n<p>Pepto-Bismol (bismuth subsalicylate)</p>"
      },
      actions: {
        items: [
          {
            href: "#/add",
            text: "Add",
            visuallyHiddenText: "new medicine"
          },
          {
            href: "#/change",
            text: "Change",
            visuallyHiddenText: "medicines"
          }
        ]
      }
    }
  ]
}) }}