Content presentation - Care cards

Use a care card to help users identify and understand the care they need, who to contact and how quickly.

Open this non urgent care cards example in new window
Copy non urgent care cards code 
<div class="hse-care-card hse-care-card--non-urgent">
  <div class="hse-care-card__heading-container">
    <h3 class="hse-care-card__heading"><span role="text"><span class="hse-u-visually-hidden">Non-urgent advice: </span>See an optician if you&#39;re worried about your vision</span></h3>
  </div>
  <div class="hse-care-card__content">

    <p>If you have a problem with your eyes, early diagnosis and treatment may help stop your vision getting worse.</p>
    <p><a href="https://www.hse.ie/service-search/Opticians/LocationSearch/9">Find an opticians</a></p>

  </div>
</div>
Close non urgent care cards code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for non urgent care cards
Name Type Required Description
Name text Type string Required true Description Text to use within the action link component.
Name href Type string Required true Description The value of the link href attribute.
Name openInNewWindow Type boolean Required false Description If set to true, then the link will open in a new window.
Name classes Type string Required false Description Classes to add to the anchor tag.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the anchor tag.
Copy non urgent care cards code 
{% from 'care-card/macro.njk' import careCard %}

{{ careCard({
        "type": "non-urgent",
        "heading": "See an optician if you're worried about your vision",
        "HTML": "
        <p>If you have a problem with your eyes, early diagnosis and treatment may help stop your vision getting worse.</p>
        <p><a href=\"https://www.hse.ie/service-search/Opticians/LocationSearch/9\">Find an opticians</a></p>
        "
}) }}
Close non urgent care cards code

We have 3 care cards for 3 levels of urgency:

When to use a care card

Use a care card if you need to tell users to take action to get medical advice or help.

Non-urgent care card

Open this non urgent care cards example in new window
Copy non urgent care cards code 
<div class="hse-care-card hse-care-card--non-urgent">
  <div class="hse-care-card__heading-container">
    <h3 class="hse-care-card__heading"><span role="text"><span class="hse-u-visually-hidden">Non-urgent advice: </span>See an optician if you&#39;re worried about your vision</span></h3>
  </div>
  <div class="hse-care-card__content">

    <p>If you have a problem with your eyes, early diagnosis and treatment may help stop your vision getting worse.</p>
    <p><a href="https://www.hse.ie/service-search/Opticians/LocationSearch/9">Find an opticians</a></p>

  </div>
</div>
Close non urgent care cards code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for non urgent care cards
Name Type Required Description
Name text Type string Required true Description Text to use within the action link component.
Name href Type string Required true Description The value of the link href attribute.
Name openInNewWindow Type boolean Required false Description If set to true, then the link will open in a new window.
Name classes Type string Required false Description Classes to add to the anchor tag.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the anchor tag.
Copy non urgent care cards code 
{% from 'care-card/macro.njk' import careCard %}

{{ careCard({
        "type": "non-urgent",
        "heading": "See an optician if you're worried about your vision",
        "HTML": "
        <p>If you have a problem with your eyes, early diagnosis and treatment may help stop your vision getting worse.</p>
        <p><a href=\"https://www.hse.ie/service-search/Opticians/LocationSearch/9\">Find an opticians</a></p>
        "
}) }}
Close non urgent care cards code

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.

Urgent care card

Open this urgent care cards example in new window
Copy urgent care cards code 
<div class="hse-care-card hse-care-card--urgent">
  <div class="hse-care-card__heading-container">
    <h3 class="hse-care-card__heading"><span role="text"><span class="hse-u-visually-hidden">Urgent advice: </span>Ask for an urgent GP appointment if:</span></h3>
  </div>
  <div class="hse-care-card__content">

    <ul>
      <li>your vision gets suddenly worse </li>
      <li>you have a dark "curtain" or shadow moving across your vision</li>
      <li>your eye is red and painful</li>
    </ul>
    <p>These aren't symptoms of AMD but can be signs of other eye problems that need to be treated immediately.</p>
    <p><strong>Go to A&amp;E or call 111 straight away if you can't get an urgent appointment.</strong></p>
    <p><a href="https://www.hse.ie/service-search/accident-and-emergency-services/locationsearch/428">Find an A&amp;E department</a></p>

  </div>
</div>
Close urgent care cards code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for urgent care cards
Name Type Required Description
Name text Type string Required true Description Text to use within the action link component.
Name href Type string Required true Description The value of the link href attribute.
Name openInNewWindow Type boolean Required false Description If set to true, then the link will open in a new window.
Name classes Type string Required false Description Classes to add to the anchor tag.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the anchor tag.
Copy urgent care cards code 
{% from 'care-card/macro.njk' import careCard %}

{{ careCard({
        "type": "urgent",
        "heading": "Ask for an urgent GP appointment if:",
        "HTML": "
        <ul>
          <li>your vision gets suddenly worse </li>
          <li>you have a dark \"curtain\" or shadow moving across your vision</li>
        <li>your eye is red and painful</li>
        </ul>
        <p>These aren't symptoms of AMD but can be signs of other eye problems that need to be treated immediately.</p>
        <p><strong>Go to A&amp;E or call 111 straight away if you can't get an urgent appointment.</strong></p>
        <p><a href=\"https://www.hse.ie/service-search/accident-and-emergency-services/locationsearch/428\">Find an A&amp;E department</a></p>
        "
}) }}
Close urgent care cards code

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

You can use the urgent care card to tell people to go to a minor injuries unit or get an urgent or out of hours GP appointment.

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.

Emergency care card

Open this immediate care cards example in new window
Copy immediate care cards code 
<div class="hse-care-card hse-care-card--immediate">
  <div class="hse-care-card__heading-container">
    <h3 class="hse-care-card__heading"><span role="text"><span class="hse-u-visually-hidden">Immediate action required: </span>Call 999 if you have sudden chest pain that:</span></h3>
  </div>
  <div class="hse-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>
Close immediate care cards code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for immediate care cards
Name Type Required Description
Name text Type string Required true Description Text to use within the action link component.
Name href Type string Required true Description The value of the link href attribute.
Name openInNewWindow Type boolean Required false Description If set to true, then the link will open in a new window.
Name classes Type string Required false Description Classes to add to the anchor tag.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the anchor tag.
Copy immediate care cards code 
{% 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>
          "
}) }}
Close immediate care cards code

Use the emergency care card if users need to get emergency help straight away. Straight away means now.

Tell them to call 999 or 112 now, or go to their nearest emergency department.

Where appropriate, include a link to help users find their nearest emergency department.

Avoid linking to more information about a condition from an emergency care card.

Only use this card for emergencies.

When not to use a care card

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 GP
  • if you want to point them to another organisation, like a charity, use inset text - or just link from a line of text
  • if you want to warn a user about something, use a warning callout instead

How to use a care card

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.

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 be aware that users often overlook text between them.

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

Text limitations

A title should have a maximum of 40 characters (this is around 2 lines on mobile).

Try to keep the body content of the card and the title on the same screen without scrolling. This is so the context isn’t lost. Check how it looks on mobile devices.

Care card content

Give the card a short heading using "if"

The heading should be 1 clear call to action.

Use the format: "Call 112 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 and 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.

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.

Longer care card titles

In this example we have a longer lead-in sentence so only part of it fits in the space for a care card title. The rest of it goes into the body of the care card.

To avoid having a double colon, do not use a colon in the title and complete the lead-in sentence in the body of the card. Start with a lower case letter on the first sentence in the card.

Contact your GP immediately if

you have a fever and any of the following symptoms:

  • severe headache
  • muscle ache

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.

The hidden text on a non-urgent care card (the green card) is "Non-urgent advice".

The hidden text on an urgent care card (the black card) is "Urgent advice".

The hidden text on an emergency care card (the red card) is "Emergency action required".

Updated: August 2023