Content presentation - Care cards

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

We have 3 care cards for 3 levels of urgency:

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

Non-urgent care card (blue)

<div class="nhsuk-care-card nhsuk-care-card--non-urgent">
  <div class="nhsuk-care-card__heading-container">
    <h3 class="nhsuk-care-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-care-card__arrow" aria-hidden="true"></span>
  </div>
  <div class="nhsuk-care-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>

{% from 'care-card/macro.njk' import careCard %}

{{ careCard({
  "type": "non-urgent",
  "heading": "Speak to a GP if:",
  "HTML": "
  <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>
  "
}) }}

Use this card when you want users to contact their GP or arrange an appointment with a health professional, like a practice nurse. 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.

More about how to use care cards.

Urgent care card (red)

<div class="nhsuk-care-card nhsuk-care-card--urgent">
  <div class="nhsuk-care-card__heading-container">
    <h3 class="nhsuk-care-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-care-card__arrow" aria-hidden="true"></span>
  </div>
  <div class="nhsuk-care-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>

{% from 'care-card/macro.njk' import careCard %}

{{ careCard({
  "type": "urgent",
  "heading": "Ask for an urgent GP appointment if:",
  "HTML": "
  <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>
  "
}) }}

Use this card when you want users to call or visit a GP or hospital urgently because they need advice or care quickly. You can, for example, use it 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.

More about how to use care cards.

Immediate care card (red and dark grey)

<div class="nhsuk-care-card nhsuk-care-card--immediate">
  <div class="nhsuk-care-card__heading-container">
    <h3 class="nhsuk-care-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-care-card__arrow" aria-hidden="true"></span>
  </div>
  <div class="nhsuk-care-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>

{% from 'care-card/macro.njk' import careCard %}

{{ careCard({
  "type": "immediate",
  "heading": "Call 999 if you have sudden chest pain that:",
  "HTML": "
  <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>
  "
}) }}

Use this card when users need to get emergency help straight away - meaning "now". Tell them to dial 999 or go to their nearest accident and emergency (A&E) department.

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

Avoid linking to more information about a condition from an emergency care card. If it's an emergency, the important thing is to dial 999 or go to A&E.

Only use this card for emergencies.

How to use care cards

When to use care cards

Use care cards to tell users to take action to get medical advice or help.

When not to use care cards

Do not use care cards:

• in forms or transactions
• for actions which do not help users get 1 of the 3 levels of care

If you want:

• to signpost users to the start of a digital service, use an action link - for example, to find a pharmacy
• to point them to another organisation, like a charity, use inset text - or just link from a line of text
• to warn a user about something, use a warning callout instead

Placing care cards on the page

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 more than 2 care cards on a page though. We want to give essential information and reassure people, not to scare them.

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.

Care card content

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.

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

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), for example:

Make the care 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.

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

People with visual disabilities may not be able to recognise care cards by their colour. Use clearly worded headings to help them.

We also add hidden text to the care card header 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>

If people use high contrast mode in Windows, the care card colours don't show, so people can't distinguish them. To make the cards look important, we use a border in this mode to make them stand out from the rest of the content.

Research

The care card design has tested well in long content pages. We've tested it in content in lots of labs and users scanning the page have stopped to read the cards.

We haven't tested care cards in transactional services and do not recommend using them. If you use a care card in a transactional service, please test it with users and let us know what you find.

We've tested care cards with 1 call to action, for example "Speak to a GP if:". If you use more than 1 action, please test it and share your research findings with us.

We found that users overlook text between care cards, or between care cards and warning callouts, when they are close to each other.

Accessibility testing showed up some issues around communicating the importance of the cards with hidden text, which we've dealt with. See the Accessibility section.

Help improve this page

The manual is a community effort. Anyone can help improve and grow it.

To help make sure the Care cards guidance is useful, relevant and up to date, you can:

• share research or feedback about the Care cards component on GitHub
• propose a change to this page on GitHub