ComponentWarning callout

6 of 6 upstream examples match. Razor component: <NhsukWarningCallout>

Showing the examples from upstream's review app. Show 1 more test-only examples

Default

Matches upstream

Important

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

Razor Pages and MVC

<nhsuk-warning-callout
    heading="Important"
    text="For safety, tell your doctor or pharmacist if you're taking any other medicines, including herbal medicines, vitamins or supplements."
/>

Blazor

<NhsukWarningCallout
    Heading="@(new WarningCalloutHeadingOptions
    {
        Text = "Important",
    })"
    Text="For safety, tell your doctor or pharmacist if you're taking any other medicines, including herbal medicines, vitamins or supplements."
/>

Nunjucks (upstream)

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

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

With custom heading

Matches upstream

Open on its own page (opens in new tab)

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.

Razor Pages and MVC

<nhsuk-warning-callout
    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."
/>

Blazor

<NhsukWarningCallout
    Heading="@(new WarningCalloutHeadingOptions
    {
        Text = "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."
/>

Nunjucks (upstream)

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

{{ warningCallout({
  "heading": {
    "text": "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."
}) }}

With custom heading as string

Matches upstream

Open on its own page (opens in new tab)

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.

Razor Pages and MVC

<nhsuk-warning-callout
    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."
/>

Blazor

<NhsukWarningCallout
    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."
/>

Nunjucks (upstream)

{% from "nhsuk/components/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."
}) }}

With HTML

Matches upstream

Open on its own page (opens in new tab)

Important

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

Razor Pages and MVC

<nhsuk-warning-callout
    heading="Important"
    html=@("<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>")
/>

Blazor

<NhsukWarningCallout
    Heading="@(new WarningCalloutHeadingOptions
    {
        Text = "Important",
    })"
    Html=@("<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>")
/>

Nunjucks (upstream)

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

{{ warningCallout({
  "heading": {
    "text": "Important"
  },
  "html": "<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>"
}) }}

With HTML via call block

Matches upstream

Open on its own page (opens in new tab)

Important

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

Razor Pages and MVC

<nhsuk-warning-callout heading="Important">
    <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>
</nhsuk-warning-callout>

Blazor

<NhsukWarningCallout
    Heading="@(new WarningCalloutHeadingOptions
    {
        Text = "Important",
    })"
>
    <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>
</NhsukWarningCallout>

Nunjucks (upstream)

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

{% call warningCallout({
  "heading": {
    "text": "Important"
  }
}) %}
  <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>
{% endcall %}