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
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 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 (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 actions

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

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 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 row border

Open this example in a new tab: Summary list without 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({
  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 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">
      <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 nhsuk-summary-list__row--no-border">
        <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">
      <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 nhsuk-summary-list__row--no-border">
        <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">
      <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 nhsuk-summary-list__row--no-border">
        <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">
      <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-from-desktop">
              <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-from-desktop">
              <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 nhsuk-summary-list__row--no-border">
        <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"
  },
  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-from-desktop">\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-from-desktop">\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"
          }
        ]
      }
    },
    {
      classes: "nhsuk-summary-list__row--no-border",
      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">
      <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 nhsuk-summary-list__row--no-border">
        <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">
      <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 nhsuk-summary-list__row--no-border">
        <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">
      <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 nhsuk-summary-list__row--no-border">
        <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">
      <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 nhsuk-summary-list__row--no-border">
        <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 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">
      <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 nhsuk-summary-list__row--no-border">
        <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 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">
      <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 nhsuk-summary-list__row--no-border">
        <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"
        }
      ]
    }
  },
  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"
          }
        ]
      }
    },
    {
      border: false,
      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"
          }
        ]
      }
    }
  ]
}) }}