Help users to - Decide when and where to get care (care cards)

Care cards help users identify and understand the care they need, who to contact and how quickly.

When to use this pattern

Use this pattern if you need to tell users to take action to get medical advice or help.

When not to use this pattern

Do not use this pattern:

for information which is not about helping users understand the care they need now
in question pages in a transactional journey
to warn users about something – use a warning callout
to stop users in a journey, unless it is to tell them to get medical help now – consider using an interruption card instead
to signpost users to the start of a digital service – use an action link, for example, to find a pharmacy
to point users to another organisation, like a charity – use inset text or just link from a line of text
to give users a brief summary of content or a task, often with a link to more detail – use a card

How it works

We have 3 care cards for 3 levels of care:

non-urgent care card (blue)
urgent care card (red)
emergency care card (red and dark grey)

You can use more than 1 care card on a page – for example, if people need different kinds of care depending on how severe their symptoms are. You can choose where to put the cards and what order to put them in.

Avoid having too many care cards on the page. We want to give essential information and reassure people, not to scare them. Only include more than 1 of each type if you can show a clear clinical or user need. For example, where you need to tell users about 2 different medical emergencies on 1 page.

If you use more than 1 care card – or a care card and a warning callout close to each other – be aware that users often overlook text between them.

Make sure any text below a care card has its own heading so that screen reader users know it's not part of the care card.

Non-urgent care card (blue)

Use the non-urgent care card when you want users to get in touch with a health professional such as a practice nurse or their GP.

You can also use it to tell people to get advice from a pharmacist or to go to a clinic, for example for a chlamydia test.

Open this example in a new tab

HTML

<div class="nhsuk-card nhsuk-card--care nhsuk-card--care--non-urgent">
  <div class="nhsuk-card--care__heading-container">
    <h2 class="nhsuk-card--care__heading"> <span role="text"><span class="nhsuk-u-visually-hidden">Non-urgent advice: </span>Speak to a GP if:</span> </h2> <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="#">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>

Nunjucks

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

{% set cardDescriptionHtml %}
  <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="#">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>
{% endset %}

{{ card({
  type: "non-urgent",
  heading: "Speak to a GP if:",
  descriptionHtml: cardDescriptionHtml
}) }}

Urgent care card (red)

Use the urgent care card if you want users to call or visit a GP or hospital quickly.

You can, for example, use the urgent care card to tell people to contact 111 or to go to a walk-in centre or minor injuries centre.

If appropriate, tell users to ask for an urgent appointment when they ring their GP practice. It can help make sure they see someone quickly.

Open this example in a new tab

HTML

<div class="nhsuk-card nhsuk-card--care nhsuk-card--care--urgent">
  <div class="nhsuk-card--care__heading-container">
    <h2 class="nhsuk-card--care__heading"> <span role="text"><span class="nhsuk-u-visually-hidden">Urgent advice: </span>Ask for an urgent GP appointment or get help from NHS 111 if you have:</span> </h2> <span class="nhsuk-card--care__arrow" aria-hidden="true"></span>
  </div>
  <div class="nhsuk-card__content">
    <ul>
      <li>pain in your eyes</li>
      <li>changes to your vision, such as vision loss or blurred vision</li>
      <li>very red eyes</li>
    </ul>
    <p>These can be signs of a more serious eye problem.</p>
    <p>You can call 111 or <a href="#">get help from 111 online</a>.</p>

  </div>
</div>

Nunjucks

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

{% set cardDescriptionHtml %}
  <ul>
    <li>pain in your eyes</li>
    <li>changes to your vision, such as vision loss or blurred vision</li>
    <li>very red eyes</li>
  </ul>
  <p>These can be signs of a more serious eye problem.</p>
  <p>You can call 111 or <a href="#">get help from 111 online</a>.</p>
{% endset %}

{{ card({
  type: "urgent",
  heading: "Ask for an urgent GP appointment or get help from NHS 111 if you have:",
  descriptionHtml: cardDescriptionHtml
}) }}

Emergency care card (red and dark grey)

If users need to get emergency help straight away (meaning "now"), use the emergency care card. Tell them to dial 999 or go to their nearest A&E department.

Where appropriate, include a link to help users find their nearest hospital A&E department.

If it's an emergency, the user must dial 999 or go to A&E now, so avoid linking to more information about a condition from an emergency care card.

Only use this card for emergencies.

Here is a mental health example.

Open this example in a new tab

HTML

<div class="nhsuk-card nhsuk-card--care nhsuk-card--care--emergency">
  <div class="nhsuk-card--care__heading-container">
    <h2 class="nhsuk-card--care__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> </h2> <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>

Nunjucks

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

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

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

{{ actionLink({
  text: "Find your nearest A&E",
  href: "#",
  classes: "nhsuk-action-link--reverse"
}) }}

{% endcall %}

Care card content

Use clearly worded headings

People with visual disabilities may not be able to recognise care cards by their colour. Use clearly worded headings to tell them what they need to do. This will also help people who are stressed or need to act quickly.

Give the card a short heading using "if"

The heading should be 1 clear call to action. Use the format: "Call 111 if:" or "Speak to a GP if:" followed by a bulleted list in the body of the card.

Make the card self-contained

Care cards should be specific and include the information the user needs. Do not say: "Contact your GP if this happens." Explain in the care card in what circumstances users should contact their GP.

Put the detail in the body of the card

Do not overload the header. Use the space in the body of the card, but keep it short.

It's OK to use a single bullet point after the "if:" in the header. It's clearer than including a stand-alone sentence in the card.

It's also OK to have 2 colons, 1 in the header and 1 in the body of the card, as in this example.

Open this example in a new tab

HTML

<div class="nhsuk-card nhsuk-card--care nhsuk-card--care--emergency">
  <div class="nhsuk-card--care__heading-container">
    <h2 class="nhsuk-card--care__heading"> <span role="text"><span class="nhsuk-u-visually-hidden">Immediate action required: </span>Call 999 or go to A&amp;E if:</span> </h2> <span class="nhsuk-card--care__arrow" aria-hidden="true"></span>
  </div>
  <div class="nhsuk-card__content">
    <p>You've been exposed to very cold temperatures and:</p>
    <ul>
      <li>have hard, frozen skin</li>
      <li>have swelling and loss of feeling in the affected area</li>
      <li>have blisters filled with blood or a clear or milky fluid</li>
      <li>you're constantly shivering, have slurred speech, slow breathing and are tired and confused</li>
    </ul>
    <p><a href="#">Find your nearest A&E</a></p>

  </div>
</div>

Nunjucks

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

{% set cardDescriptionHtml %}
  <p>You've been exposed to very cold temperatures and:</p>
  <ul>
    <li>have hard, frozen skin</li>
    <li>have swelling and loss of feeling in the affected area</li>
    <li>have blisters filled with blood or a clear or milky fluid</li>
    <li>you're constantly shivering, have slurred speech, slow breathing and are tired and confused</li>
  </ul>
  <p><a href="#">Find your nearest A&E</a></p>
{% endset %}

{{ card({
  type: "emergency",
  heading: "Call 999 or go to A&E if:",
  descriptionHtml: cardDescriptionHtml
}) }}

Keep signposting simple

Ideally you should signpost to just 1 service in the header but you can signpost to 2 (the top 2 services). If you need to, add more services at the end of the body of the care card.

Accessibility

Each care card includes hidden text to make the level of urgency clear to people who use screen readers. This also helps people who use headings to navigate the page as the text is part of the heading.

<h3><span class="visually-hidden">Non-urgent care</span> Speak to a GP if:<h3>

Research

We've tested care cards on long content pages with 1 call to action, for example "Speak to a GP if:". We found that users scanning the page stopped to read the care cards and understood what action to take.

Help us improve this guidance

Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.

Feed back or share insights on GitHub

Read more about how to feed back or share insights.

If you have any questions, get in touch with the service manual team.

Updated: August 2025