Card

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

Card default

Open this example in a new tab: Card default

If you need help now, but it's not an emergency

Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading">
      If you need help now, but it&#39;s not an emergency
    </h3>
    <p class="nhsuk-card__description">Go to <a href="#">NHS 111 online</a> or <a href="#">call 111</a>.</p>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{% call card({
  heading: "If you need help now, but it's not an emergency",
  headingLevel: 3
}) -%}

<p class="nhsuk-card__description">Go to <a href="#">NHS 111 online</a> or <a href="#">call 111</a>.</p>

{%- endcall %}

Card basic with custom HTML

Open this example in a new tab: Card basic with custom HTML

Help from NHS 111

If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.

Go to 111.nhs.uk or call 111.

For a life-threatening emergency call 999.

Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading">
      Help from NHS 111
    </h3>
    <p class="nhsuk-body">If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.</p>
<p class="nhsuk-body">Go to <a href="#">111.nhs.uk</a> or <a href="#">call 111</a>.</p>
<p class="nhsuk-body">For a life-threatening emergency call 999.</p>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{% call card({
  heading: "Help from NHS 111",
  headingLevel: 3
}) -%}

<p class="nhsuk-body">If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.</p>
<p class="nhsuk-body">Go to <a href="#">111.nhs.uk</a> or <a href="#">call 111</a>.</p>
<p class="nhsuk-body">For a life-threatening emergency call 999.</p>

{%- endcall %}

Card basic with heading link

Open this example in a new tab: Card basic with heading link

Introduction to care and support

A quick guide for people who have care and support needs and their carers

Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading nhsuk-heading-m">
      <a class="nhsuk-card__link" href="#">Introduction to care and support</a>
    </h3>
    <p class="nhsuk-card__description">A quick guide for people who have care and support needs and their carers</p>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{{ card({
  href: "#",
  heading: "Introduction to care and support",
  headingSize: "m",
  headingLevel: 3,
  description:
    "A quick guide for people who have care and support needs and their carers"
}) }}

Card basic without heading

Open this example in a new tab: Card basic without heading

A quick guide for people who have care and support needs and their carers

Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__content">
    <p class="nhsuk-card__description">A quick guide for people who have care and support needs and their carers</p>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{{ card({
  description:
    "A quick guide for people who have care and support needs and their carers"
}) }}

Card basic with summary list

Open this example in a new tab: Card basic with summary list

Regional Manager

Name: Karen Francis
Date of birth: 15 March 1984

Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading">
      Regional Manager
    </h3>
    <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 "card/macro.njk" import card -%}

{% call card({
  heading: "Regional Manager",
  headingLevel: 3
}) -%}

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

{%- endcall %}

Card basic with summary list and actions

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

Name: Karen Francis
Date of birth: 15 March 1984

Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__heading-container">
    <h3 class="nhsuk-card__heading">
      Regional Manager
    </h3>
    <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 "card/macro.njk" import card -%}

{% call card({
  heading: "Regional Manager",
  headingLevel: 3,
  actions: {
    items: [
      {
        text: "Delete",
        href: "#/delete"
      },
      {
        text: "Withdraw",
        href: "#/withdraw"
      }
    ]
  }
}) -%}

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

{%- endcall %}

Card basic with summary list and actions (empty items)

Open this example in a new tab: Card basic with summary list and actions (empty items)

Regional Manager

Delete

Name: Karen Francis
Date of birth: 15 March 1984

Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__heading-container">
    <h3 class="nhsuk-card__heading">
      Regional Manager
    </h3>
    <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">
  <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 "card/macro.njk" import card -%}

{% call card({
  heading: "Regional Manager",
  headingLevel: 3,
  actions: {
    items: [
      {
        text: "Delete",
        href: "#/delete"
      },
      false
    ]
  }
}) -%}

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

{%- endcall %}

Card basic with summary list and actions, without heading

Open this example in a new tab: Card basic with summary list and actions, without heading

Delete (Karen Francis)
Withdraw (Karen Francis)

Name: Karen Francis
Date of birth: 15 March 1984

Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__heading-container">
    <ul class="nhsuk-card__actions">
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#/delete">Delete<span class="nhsuk-u-visually-hidden"> (Karen Francis)</span></a>
      </li>
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#/withdraw">Withdraw<span class="nhsuk-u-visually-hidden"> (Karen Francis)</span></a>
      </li>
    </ul>
  </div>
  <div class="nhsuk-card__content">
    <dl class="nhsuk-summary-list">
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Name
    </dt>
    <dd class="nhsuk-summary-list__value">
      Karen Francis
    </dd>
  </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 "card/macro.njk" import card -%}

{% call card({
  actions: {
    items: [
      {
        text: "Delete",
        visuallyHiddenText: "(Karen Francis)",
        href: "#/delete"
      },
      {
        text: "Withdraw",
        visuallyHiddenText: "(Karen Francis)",
        href: "#/withdraw"
      }
    ]
  }
}) -%}

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

{%- endcall %}

Card basic with summary list and button

Open this example in a new tab: Card basic with summary list and button

Regional Manager

Name: Karen Francis
Date of birth: 15 March 1984

Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading">
      Regional Manager
    </h3>
    <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>
</dl>


<button class="nhsuk-button nhsuk-button--secondary" data-module="nhsuk-button" type="submit">
  Add role
</button>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{% call card({
  heading: "Regional Manager",
  headingLevel: 3
}) -%}

<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>
</dl>


<button class="nhsuk-button nhsuk-button--secondary" data-module="nhsuk-button" type="submit">
  Add role
</button>

{%- endcall %}

Card basic with summary list and heading link

Open this example in a new tab: Card basic with summary list and heading link

Regional Manager

Name: Karen Francis
Date of birth: 15 March 1984

Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading">
      <a class="nhsuk-card__link" href="#">Regional Manager</a>
    </h3>
    <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 "card/macro.njk" import card -%}

{% call card({
  href: "#",
  heading: "Regional Manager",
  headingLevel: 3
}) -%}

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

{%- endcall %}

Card basic with summary lists

Open this example in a new tab: Card basic with summary lists

Regional Managers

East

Name: Karen Francis
Date of birth: 15 March 1984

West

Name: Sarah Philips
Date of birth: 5 January 1978

Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading">
      Regional Managers
    </h3>
    <h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-1">East</h4>
<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>
</dl>


<h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-1">West</h4>
<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">
      Sarah Philips
    </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">
      5 January 1978
    </dd>
  </div>
</dl>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{% call card({
  heading: "Regional Managers",
  headingLevel: 3
}) -%}

<h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-1">East</h4>
<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>
</dl>


<h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-1">West</h4>
<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">
      Sarah Philips
    </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">
      5 January 1978
    </dd>
  </div>
</dl>

{%- endcall %}

Card clickable

Open this example in a new tab: Card clickable

Introduction to care and support

A quick guide for people who have care and support needs and their carers

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="#">Introduction to care and support</a>
    </h2>
    <p class="nhsuk-card__description">A quick guide for people who have care and support needs and their carers</p>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{{ card({
  href: "#",
  clickable: true,
  heading: "Introduction to care and support",
  headingSize: "m",
  description:
    "A quick guide for people who have care and support needs and their carers"
}) }}

Card emergency (red and black)

Open this example in a new tab: Card emergency (red and black)

Immediate action required: Call 999 if you have sudden chest pain that:

spreads to your arms, back, neck or jaw
makes your chest feel tight or heavy
also started with shortness of breath, sweating and feeling or being sick

You could be having a heart attack. Call 999 immediately as you need immediate treatment in hospital.

Code

Markup

<div class="nhsuk-card nhsuk-card--care nhsuk-card--care--emergency">
  <div class="nhsuk-card__heading-container">
    <h3 class="nhsuk-card__heading">
      <span role="text">
        <span class="nhsuk-u-visually-hidden">Immediate action required:</span> Call 999 if you have sudden chest pain that:
      </span>
    </h3>
    <span class="nhsuk-card--care__arrow" aria-hidden="true"></span>
  </div>
  <div class="nhsuk-card__content">
    <ul>
  <li>spreads to your arms, back, neck or jaw</li>
  <li>makes your chest feel tight or heavy</li>
  <li>also started with shortness of breath, sweating and feeling or being sick</li>
</ul>
<p>You could be having a heart attack. Call 999 immediately as you need immediate treatment in hospital.</p>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{% call card({
  heading: "Call 999 if you have sudden chest pain that:",
  headingLevel: 3,
  variant: "emergency"
}) -%}

<ul>
  <li>spreads to your arms, back, neck or jaw</li>
  <li>makes your chest feel tight or heavy</li>
  <li>also started with shortness of breath, sweating and feeling or being sick</li>
</ul>
<p>You could be having a heart attack. Call 999 immediately as you need immediate treatment in hospital.</p>

{%- endcall %}

Card emergency (red and black) with action link

Open this example in a new tab: Card emergency (red and black) with action link

Immediate action required: Call 999 or go to A&E now if:

you're coughing up more than just a few spots or streaks of blood – this could be a sign of serious bleeding in your lungs
you have severe difficulty breathing – you're gasping, choking or not able to get words out

Find your nearest A&E

Code

Markup

<div class="nhsuk-card nhsuk-card--care nhsuk-card--care--emergency">
  <div class="nhsuk-card__heading-container">
    <h3 class="nhsuk-card__heading">
      <span role="text">
        <span class="nhsuk-u-visually-hidden">Immediate action required:</span> Call 999 or go to A&amp;E now if:
      </span>
    </h3>
    <span class="nhsuk-card--care__arrow" aria-hidden="true"></span>
  </div>
  <div class="nhsuk-card__content">
    <ul>
  <li>you're coughing up more than just a few spots or streaks of blood – this could be a sign of serious bleeding in your lungs</li>
  <li>you have severe difficulty breathing – you're gasping, choking or not able to get words out</li>
</ul>

<a class="nhsuk-action-link nhsuk-action-link--reverse" href="#">
  <svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z"/>
  </svg>
  <span class="nhsuk-action-link__text">Find your nearest A&amp;E</span>
</a>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{% call card({
  heading: "Call 999 or go to A&E now if:",
  headingLevel: 3,
  variant: "emergency"
}) -%}

<ul>
  <li>you're coughing up more than just a few spots or streaks of blood – this could be a sign of serious bleeding in your lungs</li>
  <li>you have severe difficulty breathing – you're gasping, choking or not able to get words out</li>
</ul>

<a class="nhsuk-action-link nhsuk-action-link--reverse" href="#">
  <svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z"/>
  </svg>
  <span class="nhsuk-action-link__text">Find your nearest A&amp;E</span>
</a>

{%- endcall %}

Card feature

Open this example in a new tab: Card feature

Feature card heading

Feature card description.

Code

Markup

<div class="nhsuk-card nhsuk-card--feature">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading">
      Feature card heading
    </h2>
    <p class="nhsuk-card__description">Feature card description.</p>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{{ card({
  variant: "feature",
  heading: "Feature card heading",
  description: "Feature card description."
}) }}

Card feature with A to Z content

Open this example in a new tab: Card feature with A to Z content

A

AAA, see Abdominal aortic aneurysm
Abdominal aortic aneurysm
Abscess

Code

Markup

<div class="nhsuk-card nhsuk-card--feature">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading nhsuk-heading-m" id="a">
      A
    </h2>
    <ul class="nhsuk-list nhsuk-list--border">
      <li><a href="#/conditions/abdominal-aortic-aneurysm/">AAA, see Abdominal aortic aneurysm</a></li>
      <li><a href="#/conditions/abdominal-aortic-aneurysm/">Abdominal aortic aneurysm</a></li>
      <li><a href="#/conditions/abscess/">Abscess</a></li>
    </ul>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{{ card({
  variant: "feature",
  heading: "A",
  headingId: "a",
  headingSize: "m",
  descriptionHtml:
    '<ul class="nhsuk-list nhsuk-list--border">\n  <li><a href="#/conditions/abdominal-aortic-aneurysm/">AAA, see Abdominal aortic aneurysm</a></li>\n  <li><a href="#/conditions/abdominal-aortic-aneurysm/">Abdominal aortic aneurysm</a></li>\n  <li><a href="#/conditions/abscess/">Abscess</a></li>\n</ul>'
}) }}

Card feature with nested card and summary list

Open this example in a new tab: Card feature with nested card and summary list

Flu: Follow-up requested

Sarah Philips (Mum) would like to speak to a member of the team about other options for their child's vaccination.

Record a new consent response

Consent responses

Sarah Philips (Mum)

Email address: sarah.philips@example.com
Date: 25 August 2025 at 4:04 pm
Response: Follow up requested

Code

Markup

<div class="nhsuk-card nhsuk-card--feature">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading">
      Flu: Follow-up requested
    </h2>
    <p>Sarah Philips (Mum) would like to speak to a member of the team about other options for their child's vaccination.</p>
<a class="nhsuk-button nhsuk-button--secondary" data-module="nhsuk-button" href="#" role="button" draggable="false">
  Record a new consent response
</a>


<h3 class="nhsuk-heading-s">Consent responses</h3>

<div class="nhsuk-card nhsuk-card--clickable">
  <div class="nhsuk-card__content">
    <h4 class="nhsuk-card__heading">
      <a class="nhsuk-card__link" href="#">Sarah Philips (Mum)</a>
    </h4>
    <dl class="nhsuk-summary-list">
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Email address
        </dt>
        <dd class="nhsuk-summary-list__value">
          sarah.philips@example.com
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Date
        </dt>
        <dd class="nhsuk-summary-list__value">
          25 August 2025 at 4:04 pm
        </dd>
      </div>
      <div class="nhsuk-summary-list__row nhsuk-summary-list__row--no-border">
        <dt class="nhsuk-summary-list__key">
          Response
        </dt>
        <dd class="nhsuk-summary-list__value">
          <strong class="nhsuk-tag nhsuk-tag--orange">
            Follow up requested
          </strong>
        </dd>
      </div>
    </dl>
  </div>
</div>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{% call card({
  variant: "feature",
  heading: "Flu: Follow-up requested"
}) -%}

<p>Sarah Philips (Mum) would like to speak to a member of the team about other options for their child's vaccination.</p>
<a class="nhsuk-button nhsuk-button--secondary" data-module="nhsuk-button" href="#" role="button" draggable="false">
  Record a new consent response
</a>


<h3 class="nhsuk-heading-s">Consent responses</h3>

<div class="nhsuk-card nhsuk-card--clickable">
  <div class="nhsuk-card__content">
    <h4 class="nhsuk-card__heading">
      <a class="nhsuk-card__link" href="#">Sarah Philips (Mum)</a>
    </h4>
    <dl class="nhsuk-summary-list">
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Email address
        </dt>
        <dd class="nhsuk-summary-list__value">
          sarah.philips@example.com
        </dd>
      </div>
      <div class="nhsuk-summary-list__row">
        <dt class="nhsuk-summary-list__key">
          Date
        </dt>
        <dd class="nhsuk-summary-list__value">
          25 August 2025 at 4:04 pm
        </dd>
      </div>
      <div class="nhsuk-summary-list__row nhsuk-summary-list__row--no-border">
        <dt class="nhsuk-summary-list__key">
          Response
        </dt>
        <dd class="nhsuk-summary-list__value">
          <strong class="nhsuk-tag nhsuk-tag--orange">
            Follow up requested
          </strong>
        </dd>
      </div>
    </dl>
  </div>
</div>

{%- endcall %}

Card feature with summary list

Open this example in a new tab: Card feature with summary list

Feature card heading

Name: Karen Francis
Date of birth: 15 March 1984

Code

Markup

<div class="nhsuk-card nhsuk-card--feature">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading">
      Feature card heading
    </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 "card/macro.njk" import card -%}

{% call card({
  variant: "feature",
  heading: "Feature card heading"
}) -%}

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

{%- endcall %}

Card primary (with chevron)

Open this example in a new tab: Card primary (with chevron)

Breast screening

Code

Markup

<div class="nhsuk-card nhsuk-card--clickable nhsuk-card--primary">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      <a class="nhsuk-card__link" href="#">Breast screening</a>
    </h2>
    <svg class="nhsuk-icon nhsuk-icon--chevron-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
      <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm-.3 5.8a1 1 0 1 0-1.5 1.4l2.9 2.8-2.9 2.8a1 1 0 0 0 1.5 1.4l3.5-3.5c.4-.4.4-1 0-1.4Z"/>
    </svg>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{{ card({
  href: "#",
  variant: "primary",
  clickable: true,
  heading: "Breast screening",
  headingSize: "m"
}) }}

Card primary (with chevron and description)

Open this example in a new tab: Card primary (with chevron and description)

Introduction to care and support

A quick guide for people who have care and support needs and their carers

Code

Markup

<div class="nhsuk-card nhsuk-card--clickable nhsuk-card--primary">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      <a class="nhsuk-card__link" href="#">Introduction to care and support</a>
    </h2>
    <p class="nhsuk-card__description">A quick guide for people who have care and support needs and their carers</p>
    <svg class="nhsuk-icon nhsuk-icon--chevron-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
      <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm-.3 5.8a1 1 0 1 0-1.5 1.4l2.9 2.8-2.9 2.8a1 1 0 0 0 1.5 1.4l3.5-3.5c.4-.4.4-1 0-1.4Z"/>
    </svg>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{{ card({
  href: "#",
  variant: "primary",
  clickable: true,
  heading: "Introduction to care and support",
  headingSize: "m",
  description:
    "A quick guide for people who have care and support needs and their carers"
}) }}

Card secondary

Open this example in a new tab: Card secondary

Urgent and emergency care services

Services the NHS provides if you need urgent or emergency medical help

Code

Markup

<div class="nhsuk-card nhsuk-card--clickable nhsuk-card--secondary">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      <a class="nhsuk-card__link" href="#">Urgent and emergency care services</a>
    </h2>
    <p class="nhsuk-card__description">Services the NHS provides if you need urgent or emergency medical help</p>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{{ card({
  href: "#",
  clickable: true,
  variant: "secondary",
  heading: "Urgent and emergency care services",
  headingSize: "m",
  description:
    "Services the NHS provides if you need urgent or emergency medical help"
}) }}

Card secondary non-clickable with custom description

Open this example in a new tab: Card secondary non-clickable with custom description

Why we are reinvesting in the NHS Prototype kit

21 July 2025

Frankie and Mike explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it.

Code

Markup

<div class="nhsuk-card nhsuk-card--secondary">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading nhsuk-u-font-size-22 nhsuk-u-margin-bottom-2">
      <a class="nhsuk-card__link" href="#">Why we are reinvesting in the NHS Prototype kit</a>
    </h2>
    <p class="nhsuk-body-s nhsuk-u-margin-bottom-2">21 July 2025</p>
    <p class="nhsuk-card__description">Frankie and Mike explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it.</p>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{{ card({
  href: "#",
  variant: "secondary",
  heading: "Why we are reinvesting in the NHS Prototype kit",
  headingClasses: "nhsuk-u-font-size-22 nhsuk-u-margin-bottom-2",
  descriptionHtml:
    '<p class="nhsuk-body-s nhsuk-u-margin-bottom-2">21 July 2025</p>\n<p class="nhsuk-card__description">Frankie and Mike explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it.</p>'
}) }}

Card secondary with custom HTML

Open this example in a new tab: Card secondary with custom HTML

Help from NHS 111

If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.

Go to 111.nhs.uk or call 111.

For a life-threatening emergency call 999.

Code

Markup

<div class="nhsuk-card nhsuk-card--secondary">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading">
      Help from NHS 111
    </h3>
    <p class="nhsuk-body">If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.</p>
<p class="nhsuk-body">Go to <a href="#">111.nhs.uk</a> or <a href="#">call 111</a>.</p>
<p class="nhsuk-body">For a life-threatening emergency call 999.</p>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{% call card({
  variant: "secondary",
  heading: "Help from NHS 111",
  headingLevel: 3
}) -%}

<p class="nhsuk-body">If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.</p>
<p class="nhsuk-body">Go to <a href="#">111.nhs.uk</a> or <a href="#">call 111</a>.</p>
<p class="nhsuk-body">For a life-threatening emergency call 999.</p>

{%- endcall %}

Card secondary with heading link

Open this example in a new tab: Card secondary with heading link

Introduction to care and support

A quick guide for people who have care and support needs and their carers

Code

Markup

<div class="nhsuk-card nhsuk-card--secondary">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading nhsuk-heading-m">
      <a class="nhsuk-card__link" href="#">Introduction to care and support</a>
    </h3>
    <p class="nhsuk-card__description">A quick guide for people who have care and support needs and their carers</p>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{{ card({
  href: "#",
  variant: "secondary",
  heading: "Introduction to care and support",
  headingSize: "m",
  headingLevel: 3,
  description:
    "A quick guide for people who have care and support needs and their carers"
}) }}

Card secondary without heading

Open this example in a new tab: Card secondary without heading

A quick guide for people who have care and support needs and their carers

Code

Markup

<div class="nhsuk-card nhsuk-card--secondary">
  <div class="nhsuk-card__content">
    <p class="nhsuk-card__description">A quick guide for people who have care and support needs and their carers</p>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{{ card({
  variant: "secondary",
  description:
    "A quick guide for people who have care and support needs and their carers"
}) }}

Card secondary with summary list

Open this example in a new tab: Card secondary with summary list

Regional Manager

Name: Karen Francis
Date of birth: 15 March 1984

Code

Markup

<div class="nhsuk-card nhsuk-card--secondary">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading">
      Regional Manager
    </h3>
    <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 "card/macro.njk" import card -%}

{% call card({
  variant: "secondary",
  heading: "Regional Manager",
  headingLevel: 3
}) -%}

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

{%- endcall %}

Card secondary with summary list and actions

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

Regional Manager

Delete (Regional Manager)
Withdraw (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">
    <h3 class="nhsuk-card__heading">
      Regional Manager
    </h3>
    <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 "card/macro.njk" import card -%}

{% call card({
  variant: "secondary",
  heading: "Regional Manager",
  headingLevel: 3,
  actions: {
    items: [
      {
        text: "Delete",
        href: "#/delete"
      },
      {
        text: "Withdraw",
        href: "#/withdraw"
      }
    ]
  }
}) -%}

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

{%- endcall %}

Card secondary with summary list and actions (empty items)

Open this example in a new tab: Card secondary with summary list and actions (empty items)

Regional Manager

Delete

Name: Karen Francis
Date of birth: 15 March 1984

Code

Markup

<div class="nhsuk-card nhsuk-card--secondary">
  <div class="nhsuk-card__heading-container">
    <h3 class="nhsuk-card__heading">
      Regional Manager
    </h3>
    <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">
  <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 "card/macro.njk" import card -%}

{% call card({
  variant: "secondary",
  heading: "Regional Manager",
  headingLevel: 3,
  actions: {
    items: [
      {
        text: "Delete",
        href: "#/delete"
      },
      false
    ]
  }
}) -%}

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

{%- endcall %}

Card secondary with summary list and actions, without heading

Open this example in a new tab: Card secondary with summary list and actions, without heading

Delete (Karen Francis)
Withdraw (Karen Francis)

Name: Karen Francis
Date of birth: 15 March 1984

Code

Markup

<div class="nhsuk-card nhsuk-card--secondary">
  <div class="nhsuk-card__heading-container">
    <ul class="nhsuk-card__actions">
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#/delete">Delete<span class="nhsuk-u-visually-hidden"> (Karen Francis)</span></a>
      </li>
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#/withdraw">Withdraw<span class="nhsuk-u-visually-hidden"> (Karen Francis)</span></a>
      </li>
    </ul>
  </div>
  <div class="nhsuk-card__content">
    <dl class="nhsuk-summary-list">
  <div class="nhsuk-summary-list__row">
    <dt class="nhsuk-summary-list__key">
      Name
    </dt>
    <dd class="nhsuk-summary-list__value">
      Karen Francis
    </dd>
  </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 "card/macro.njk" import card -%}

{% call card({
  variant: "secondary",
  actions: {
    items: [
      {
        text: "Delete",
        visuallyHiddenText: "(Karen Francis)",
        href: "#/delete"
      },
      {
        text: "Withdraw",
        visuallyHiddenText: "(Karen Francis)",
        href: "#/withdraw"
      }
    ]
  }
}) -%}

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

{%- endcall %}

Card secondary with summary list and button

Open this example in a new tab: Card secondary with summary list and button

Regional Manager

Name: Karen Francis
Date of birth: 15 March 1984

Code

Markup

<div class="nhsuk-card nhsuk-card--secondary">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading">
      Regional Manager
    </h3>
    <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>
</dl>


<button class="nhsuk-button nhsuk-button--secondary" data-module="nhsuk-button" type="submit">
  Add role
</button>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{% call card({
  variant: "secondary",
  heading: "Regional Manager",
  headingLevel: 3
}) -%}

<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>
</dl>


<button class="nhsuk-button nhsuk-button--secondary" data-module="nhsuk-button" type="submit">
  Add role
</button>

{%- endcall %}

Card secondary with summary list and heading link

Open this example in a new tab: Card secondary with summary list and heading link

Regional Manager

Name: Karen Francis
Date of birth: 15 March 1984

Code

Markup

<div class="nhsuk-card nhsuk-card--secondary">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading">
      <a class="nhsuk-card__link" href="#">Regional Manager</a>
    </h3>
    <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 "card/macro.njk" import card -%}

{% call card({
  href: "#",
  variant: "secondary",
  heading: "Regional Manager",
  headingLevel: 3
}) -%}

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

{%- endcall %}

Card secondary with summary lists

Open this example in a new tab: Card secondary with summary lists

Regional Managers

East

Name: Karen Francis
Date of birth: 15 March 1984

West

Name: Sarah Philips
Date of birth: 5 January 1978

Code

Markup

<div class="nhsuk-card nhsuk-card--secondary">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading">
      Regional Managers
    </h3>
    <h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-1">East</h4>
<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>
</dl>


<h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-1">West</h4>
<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">
      Sarah Philips
    </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">
      5 January 1978
    </dd>
  </div>
</dl>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{% call card({
  variant: "secondary",
  heading: "Regional Managers",
  headingLevel: 3
}) -%}

<h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-1">East</h4>
<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>
</dl>


<h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-1">West</h4>
<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">
      Sarah Philips
    </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">
      5 January 1978
    </dd>
  </div>
</dl>

{%- endcall %}

Card top task

Open this example in a new tab: Card top task

Order a repeat prescription

Code

Markup

<div class="nhsuk-card nhsuk-card--clickable">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading nhsuk-heading-xs">
      <a class="nhsuk-card__link" href="#">Order a repeat prescription</a>
    </h3>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{{ card({
  href: "#",
  clickable: true,
  heading: "Order a repeat prescription",
  headingSize: "xs",
  headingLevel: 3
}) }}

Card non-urgent (blue)

Open this example in a new tab: Card non-urgent (blue)

Non-urgent advice: Speak to a GP if:

you're not sure it's chickenpox
the skin around the blisters is red, hot or painful (signs of infection)
your child is dehydrated
you're concerned about your child or they get worse

Tell the receptionist you think it's chickenpox before going in. They may recommend a special appointment time if other patients are at risk.

Code

Markup

<div class="nhsuk-card nhsuk-card--care nhsuk-card--care--non-urgent">
  <div class="nhsuk-card__heading-container">
    <h3 class="nhsuk-card__heading">
      <span role="text">
        <span class="nhsuk-u-visually-hidden">Non-urgent advice:</span> Speak to a GP if:
      </span>
    </h3>
    <span class="nhsuk-card--care__arrow" aria-hidden="true"></span>
  </div>
  <div class="nhsuk-card__content">
    <ul>
  <li>you're not sure it's chickenpox</li>
  <li>the skin around the blisters is red, hot or painful (signs of infection)</li>
  <li>your child is <a href="https://www.nhs.uk/conditions/dehydration">dehydrated</a></li>
  <li>you're concerned about your child or they get worse</li>
</ul>
<p>Tell the receptionist you think it's chickenpox before going in. They may recommend a special appointment time if other patients are at risk.</p>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{% call card({
  heading: "Speak to a GP if:",
  headingLevel: 3,
  variant: "non-urgent"
}) -%}

<ul>
  <li>you're not sure it's chickenpox</li>
  <li>the skin around the blisters is red, hot or painful (signs of infection)</li>
  <li>your child is <a href="https://www.nhs.uk/conditions/dehydration">dehydrated</a></li>
  <li>you're concerned about your child or they get worse</li>
</ul>
<p>Tell the receptionist you think it's chickenpox before going in. They may recommend a special appointment time if other patients are at risk.</p>

{%- endcall %}

Card urgent (red)

Open this example in a new tab: Card urgent (red)

Urgent advice: Ask for an urgent GP appointment if:

you're an adult and have chickenpox
you're pregnant and haven't had chickenpox before and you've been near someone with it
you have a weakened immune system and you've been near someone with chickenpox
you think your newborn baby has chickenpox

In these situations, your GP can prescribe medicine to prevent complications. You need to take it within 24 hours of the spots coming out.

Code

Markup

<div class="nhsuk-card nhsuk-card--care nhsuk-card--care--urgent">
  <div class="nhsuk-card__heading-container">
    <h3 class="nhsuk-card__heading">
      <span role="text">
        <span class="nhsuk-u-visually-hidden">Urgent advice:</span> Ask for an urgent GP appointment if:
      </span>
    </h3>
    <span class="nhsuk-card--care__arrow" aria-hidden="true"></span>
  </div>
  <div class="nhsuk-card__content">
    <ul>
  <li>you're an adult and have chickenpox</li>
  <li>you're pregnant and haven't had chickenpox before and you've been near someone with it</li>
  <li>you have a weakened immune system and you've been near someone with chickenpox</li>
  <li>you think your newborn baby has chickenpox</li>
</ul>
<p>In these situations, your GP can prescribe medicine to prevent complications. You need to take it within 24 hours of the spots coming out.</p>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{% call card({
  heading: "Ask for an urgent GP appointment if:",
  headingLevel: 3,
  variant: "urgent"
}) -%}

<ul>
  <li>you're an adult and have chickenpox</li>
  <li>you're pregnant and haven't had chickenpox before and you've been near someone with it</li>
  <li>you have a weakened immune system and you've been near someone with chickenpox</li>
  <li>you think your newborn baby has chickenpox</li>
</ul>
<p>In these situations, your GP can prescribe medicine to prevent complications. You need to take it within 24 hours of the spots coming out.</p>

{%- endcall %}

Card warning

Open this example in a new tab: Card warning

School, nursery or work

Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.

Code

Markup

<div class="nhsuk-card nhsuk-card--warning">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading">
      School, nursery or work
    </h2>
    <p class="nhsuk-card__description">Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.</p>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{{ card({
  variant: "warning",
  heading: "School, nursery or work",
  description:
    "Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared."
}) }}

Card warning with actions

Open this example in a new tab: Card warning with actions

School, nursery or work

Dismiss

Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.

Code

Markup

<div class="nhsuk-card nhsuk-card--warning">
  <div class="nhsuk-card__heading-container">
    <h2 class="nhsuk-card__heading">
      School, nursery or work
    </h2>
    <div class="nhsuk-card__actions">
      <a class="nhsuk-link" href="#/dismiss">Dismiss<span class="nhsuk-u-visually-hidden"> (School, nursery or work)</span></a>
    </div>
  </div>
  <div class="nhsuk-card__content">
    <p class="nhsuk-card__description">Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.</p>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{{ card({
  variant: "warning",
  heading: "School, nursery or work",
  description:
    "Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.",
  actions: {
    items: [
      {
        text: "Dismiss",
        href: "#/dismiss"
      }
    ]
  }
}) }}

Card with image

Open this example in a new tab: Card with image

Exercise

Programmes, workouts and tips to get you moving and improve your fitness and wellbeing

Code

Markup

<div class="nhsuk-card nhsuk-card--clickable">
  <img class="nhsuk-card__img" src="https://assets.nhs.uk/prod/images/A_0218_exercise-main_FKW1X7.width-690.jpg" alt="">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      <a class="nhsuk-card__link" href="#">Exercise</a>
    </h2>
    <p class="nhsuk-card__description">Programmes, workouts and tips to get you moving and improve your fitness and wellbeing</p>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{{ card({
  image: {
    src: "https://assets.nhs.uk/prod/images/A_0218_exercise-main_FKW1X7.width-690.jpg"
  },
  href: "#",
  clickable: true,
  heading: "Exercise",
  headingSize: "m",
  description:
    "Programmes, workouts and tips to get you moving and improve your fitness and wellbeing"
}) }}

Card with image and caption

Open this example in a new tab: Card with image and caption

No specific amount of time is recommended, but a typical training session could take less than 20 minutes.

Exercise

Programmes, workouts and tips to get you moving and improve your fitness and wellbeing

Code

Markup

<div class="nhsuk-card nhsuk-card--clickable">
  <figure class="nhsuk-image">
    <img class="nhsuk-image__img" src="https://assets.nhs.uk/prod/images/A_0218_exercise-main_FKW1X7.width-690.jpg" alt="">
    <figcaption class="nhsuk-image__caption nhsuk-u-secondary-text-colour">
      No specific amount of time is recommended, but a typical training session could take less than 20 minutes.
    </figcaption>
  </figure>
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      <a class="nhsuk-card__link" href="#">Exercise</a>
    </h2>
    <p class="nhsuk-card__description">Programmes, workouts and tips to get you moving and improve your fitness and wellbeing</p>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{{ card({
  image: {
    html: '<figure class="nhsuk-image">\n  <img class="nhsuk-image__img" src="https://assets.nhs.uk/prod/images/A_0218_exercise-main_FKW1X7.width-690.jpg" alt="">\n  <figcaption class="nhsuk-image__caption nhsuk-u-secondary-text-colour">\n    No specific amount of time is recommended, but a typical training session could take less than 20 minutes.\n  </figcaption>\n</figure>\n'
  },
  href: "#",
  clickable: true,
  heading: "Exercise",
  headingSize: "m",
  description:
    "Programmes, workouts and tips to get you moving and improve your fitness and wellbeing"
}) }}

Card with image and custom HTML

Open this example in a new tab: Card with image and custom HTML

Why we are reinvesting in the NHS prototype kit

Published on: 21 July 2025

NHS England Design Matters blog

Frankie Roberto and Mike Gallagher explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it.

Code

Markup

<div class="nhsuk-card nhsuk-card--clickable">
  <img class="nhsuk-card__img" src="https://service-manual.nhs.uk/assets/blog-prototype-kit.png" alt="">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      <a class="nhsuk-card__link" href="https://digital.nhs.uk/blog/design-matters/2025/why-we-are-reinvesting-in-the-nhs-prototype-kit">Why we are reinvesting in the NHS prototype kit</a>
    </h2>
    <p class="nhsuk-body-s nhsuk-u-secondary-text-colour nhsuk-u-margin-bottom-0"><span class="nhsuk-u-visually-hidden">Published on: </span>21 July 2025</p>
    <p class="nhsuk-body-s nhsuk-u-font-weight-bold">NHS England Design Matters blog</p>
    <p class="nhsuk-card__description">Frankie Roberto and Mike Gallagher explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it.</p>
  </div>
</div>

Macro

{% from "card/macro.njk" import card -%}

{{ card({
  image: {
    src: "https://service-manual.nhs.uk/assets/blog-prototype-kit.png"
  },
  href: "https://digital.nhs.uk/blog/design-matters/2025/why-we-are-reinvesting-in-the-nhs-prototype-kit",
  clickable: true,
  heading: "Why we are reinvesting in the NHS prototype kit",
  headingSize: "m",
  headingHtml:
    '<p class="nhsuk-body-s nhsuk-u-secondary-text-colour nhsuk-u-margin-bottom-0"><span class="nhsuk-u-visually-hidden">Published on: </span>21 July 2025</p>\n<p class="nhsuk-body-s nhsuk-u-font-weight-bold">NHS England Design Matters blog</p>',
  description:
    "Frankie Roberto and Mike Gallagher explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it."
}) }}