Tasks
-
Help users 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:
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.
- HTML code for non urgent help users decide when and where to get care
- Nunjucks code for non urgent help users decide when and where to get care
<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>{% from 'card/macro.njk' import card %}
{{ card({
"type": "non-urgent",
"heading": "Speak to a GP if:",
"descriptionHtml": "
<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>
"
}) }}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.
- HTML code for urgent help users decide when and where to get care
- Nunjucks code for urgent help users decide when and where to get care
<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 if:</span>
</h2>
<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>{% from 'card/macro.njk' import card %}
{{ card({
"type": "urgent",
"heading": "Ask for an urgent GP appointment if:",
"descriptionHtml": "
<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>
"
}) }}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.
- HTML code for emergency help users decide when and where to get care
- Nunjucks code for emergency help users decide when and where to get care
<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&E now if:</span>
</h2>
<span class="nhsuk-card--care__arrow" aria-hidden="true"></span>
</div>
<div class="nhsuk-card__content">
<ul>
<li>you or someone you know needs immediate help</li>
<li>you have seriously harmed yourself – for example, by taking a drug overdose</li>
</ul>
<p>A mental health emergency should be taken as seriously as a medical emergency.</p>
<p><a href="">Find your nearest A&E</a></p>
</div>
</div>{% from 'card/macro.njk' import card %}
{{ card({
"type": "emergency",
"heading": "Call 999 or go to A&E now if:",
"descriptionHtml": "
<ul>
<li>you or someone you know needs immediate help</li>
<li>you have seriously harmed yourself – for example, by taking a drug overdose</li>
</ul>
<p>A mental health emergency should be taken as seriously as a medical emergency.</p>
<p><a href=\"\">Find your nearest A&E</a></p>
"
}) }}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.
- HTML code for two colons help users decide when and where to get care
- Nunjucks code for two colons help users decide when and where to get care
<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 if:</span>
</h2>
<span class="nhsuk-card--care__arrow" aria-hidden="true"></span>
</div>
<div class="nhsuk-card__content">
<p>You have sudden chest pain that:</p>
<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 'card/macro.njk' import card %}
{{ card({
"type": "emergency",
"heading": "Call 999 if:",
"descriptionHtml": "
<p>You have sudden chest pain that:</p>
<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>
"
}) }}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.
Read more about how to feedback or share insights.
If you have any questions, get in touch with the service manual team.
Updated: November 2021