Warning callout

These examples are used for automated tests and may not follow service manual best practice.

Warning callout default

Open this example in a new tab: Warning callout default

Important

For safety, tell your doctor or pharmacist if you're taking any other medicines, including herbal medicines, vitamins or supplements.

Code

Markup

<div class="nhsuk-card nhsuk-card--warning">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading">
      Important
    </h3>
    <p class="nhsuk-card__description">For safety, tell your doctor or pharmacist if you&#39;re taking any other medicines, including herbal medicines, vitamins or supplements.</p>
  </div>
</div>

Macro

{% from "warning-callout/macro.njk" import warningCallout -%}

{{ warningCallout({
  heading: "Important",
  text: "For safety, tell your doctor or pharmacist if you're taking any other medicines, including herbal medicines, vitamins or supplements."
}) }}

Warning callout with custom heading

Open this example in a new tab: Warning callout with custom heading

Important: School, nursery or work

Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.

Code

Markup

<div class="nhsuk-card nhsuk-card--warning">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading">
      <span role="text">
        <span class="nhsuk-u-visually-hidden">Important:</span> School, nursery or work
      </span>
    </h3>
    <p class="nhsuk-card__description">Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.</p>
  </div>
</div>

Macro

{% from "warning-callout/macro.njk" import warningCallout -%}

{{ warningCallout({
  heading: "School, nursery or work",
  text: "Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared."
}) }}