Card used to describe care instructions to visitors. Comes in three variants:

• non-urgent
• urgent
• immediate

Example

---

Macro - Non-urgent

  {{ card({
    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>
          "
  }) }}
  

---

HTML - Non-urgent

<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="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 - Urgent

  {{ card({
    type: "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>
          "
  }) }}

---

HTML - Urgent

<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>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="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 - Immediate

  {{ card({
    type: "emergency",
    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>
          "
  }) }}

---

HTML - Immediate

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