ComponentNotification banner

17 of 17 upstream examples match. Razor component: <NhsukNotificationBanner>

Default

Matches upstream

Razor Pages and MVC

<nhsuk-notification-banner text="The patient record was updated." />

Blazor

<NhsukNotificationBanner Text="The patient record was updated." />

Nunjucks (upstream)

{% from "nhsuk/components/notification-banner/macro.njk" import notificationBanner %}

{{ notificationBanner({
  "text": "The patient record was updated."
}) }}

Auto-focus disabled, with success variant

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-notification-banner
    variant="success"
    disable-auto-focus="true"
    text=@("Email sent to example@email.com")
/>

Blazor

<NhsukNotificationBanner
    Variant="success"
    DisableAutoFocus="true"
    Text=@("Email sent to example@email.com")
/>

Nunjucks (upstream)

{% from "nhsuk/components/notification-banner/macro.njk" import notificationBanner %}

{{ notificationBanner({
  "variant": "success",
  "disableAutoFocus": true,
  "text": "Email sent to example@email.com"
}) }}

Auto-focus explicitly enabled, with success variant

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-notification-banner
    variant="success"
    disable-auto-focus="false"
    text=@("Email sent to example@email.com")
/>

Blazor

<NhsukNotificationBanner
    Variant="success"
    DisableAutoFocus="false"
    Text=@("Email sent to example@email.com")
/>

Nunjucks (upstream)

{% from "nhsuk/components/notification-banner/macro.njk" import notificationBanner %}

{{ notificationBanner({
  "variant": "success",
  "disableAutoFocus": false,
  "text": "Email sent to example@email.com"
}) }}

Custom tabindex

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-notification-banner
    variant="success"
    text=@("Email sent to example@email.com")
    attributes="@(new NhsukAttributes
    {
        ["tabindex"] = "2",
    })"
/>

Blazor

<NhsukNotificationBanner
    Variant="success"
    Text=@("Email sent to example@email.com")
    Attributes="@(new NhsukAttributes
    {
        ["tabindex"] = "2",
    })"
/>

Nunjucks (upstream)

{% from "nhsuk/components/notification-banner/macro.njk" import notificationBanner %}

{{ notificationBanner({
  "variant": "success",
  "text": "Email sent to example@email.com",
  "attributes": {
    "tabindex": 2
  }
}) }}

Paragraph with heading class

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-notification-banner
    heading-options="@(new NotificationBannerHeadingOptions
    {
        Text = "You have 9 days to send a response.",
        Element = "p",
    })"
/>

Blazor

<NhsukNotificationBanner
    Heading="@(new NotificationBannerHeadingOptions
    {
        Text = "You have 9 days to send a response.",
        Element = "p",
    })"
/>

Nunjucks (upstream)

{% from "nhsuk/components/notification-banner/macro.njk" import notificationBanner %}

{{ notificationBanner({
  "heading": {
    "text": "You have 9 days to send a response.",
    "element": "p"
  }
}) }}

Role=alert overridden to role=region, with success variant

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-notification-banner
    variant="success"
    role="region"
    text=@("Email sent to example@email.com")
/>

Blazor

<NhsukNotificationBanner
    Variant="success"
    Role="region"
    Text=@("Email sent to example@email.com")
/>

Nunjucks (upstream)

{% from "nhsuk/components/notification-banner/macro.njk" import notificationBanner %}

{{ notificationBanner({
  "variant": "success",
  "role": "region",
  "text": "Email sent to example@email.com"
}) }}

Success with HTML

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-notification-banner
    variant="success"
    heading="4 files uploaded"
    html=@(@"<ul class=""nhsuk-list"">
  <li><a href=""link-1"" class=""nhsuk-notification-banner__link"">government-strategy.pdf</a></li>
  <li><a href=""link-2"" class=""nhsuk-notification-banner__link"">government-strategy-v1.pdf</a></li>
</ul>")
/>

Blazor

<NhsukNotificationBanner
    Variant="success"
    Heading="@(new NotificationBannerHeadingOptions
    {
        Text = "4 files uploaded",
    })"
    Html=@(@"<ul class=""nhsuk-list"">
  <li><a href=""link-1"" class=""nhsuk-notification-banner__link"">government-strategy.pdf</a></li>
  <li><a href=""link-2"" class=""nhsuk-notification-banner__link"">government-strategy-v1.pdf</a></li>
</ul>")
/>

Nunjucks (upstream)

{% from "nhsuk/components/notification-banner/macro.njk" import notificationBanner %}

{{ notificationBanner({
  "variant": "success",
  "heading": {
    "text": "4 files uploaded"
  },
  "html": "<ul class=\"nhsuk-list\">\n  <li><a href=\"link-1\" class=\"nhsuk-notification-banner__link\">government-strategy.pdf</a></li>\n  <li><a href=\"link-2\" class=\"nhsuk-notification-banner__link\">government-strategy-v1.pdf</a></li>\n</ul>"
}) }}

Success with HTML via call block

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-notification-banner variant="success" heading="4 files uploaded">
    <ul class="nhsuk-list">
      <li><a href="link-1" class="nhsuk-notification-banner__link">government-strategy.pdf</a></li>
      <li><a href="link-2" class="nhsuk-notification-banner__link">government-strategy-v1.pdf</a></li>
    </ul>
</nhsuk-notification-banner>

Blazor

<NhsukNotificationBanner
    Variant="success"
    Heading="@(new NotificationBannerHeadingOptions
    {
        Text = "4 files uploaded",
    })"
>
    <ul class="nhsuk-list">
      <li><a href="link-1" class="nhsuk-notification-banner__link">government-strategy.pdf</a></li>
      <li><a href="link-2" class="nhsuk-notification-banner__link">government-strategy-v1.pdf</a></li>
    </ul>
</NhsukNotificationBanner>

Nunjucks (upstream)

{% from "nhsuk/components/notification-banner/macro.njk" import notificationBanner %}

{% call notificationBanner({
  "variant": "success",
  "heading": {
    "text": "4 files uploaded"
  }
}) %}
  <ul class="nhsuk-list">
  <li><a href="link-1" class="nhsuk-notification-banner__link">government-strategy.pdf</a></li>
  <li><a href="link-2" class="nhsuk-notification-banner__link">government-strategy-v1.pdf</a></li>
</ul>
{% endcall %}

With a list

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-notification-banner
    heading="4 files uploaded"
    html=@(@"<ul class=""nhsuk-list nhsuk-list--bullet"">
  <li><a href=""#"" class=""nhsuk-notification-banner__link"">government-strategy.pdf</a></li>
  <li><a href=""#"" class=""nhsuk-notification-banner__link"">government-strategy-v2.pdf</a></li>
  <li><a href=""#"" class=""nhsuk-notification-banner__link"">government-strategy-v3-FINAL.pdf</a></li>
  <li><a href=""#"" class=""nhsuk-notification-banner__link"">government-strategy-v4-FINAL-v2.pdf</a></li>
</ul>")
/>

Blazor

<NhsukNotificationBanner
    Heading="@(new NotificationBannerHeadingOptions
    {
        Text = "4 files uploaded",
    })"
    Html=@(@"<ul class=""nhsuk-list nhsuk-list--bullet"">
  <li><a href=""#"" class=""nhsuk-notification-banner__link"">government-strategy.pdf</a></li>
  <li><a href=""#"" class=""nhsuk-notification-banner__link"">government-strategy-v2.pdf</a></li>
  <li><a href=""#"" class=""nhsuk-notification-banner__link"">government-strategy-v3-FINAL.pdf</a></li>
  <li><a href=""#"" class=""nhsuk-notification-banner__link"">government-strategy-v4-FINAL-v2.pdf</a></li>
</ul>")
/>

Nunjucks (upstream)

{% from "nhsuk/components/notification-banner/macro.njk" import notificationBanner %}

{{ notificationBanner({
  "heading": {
    "text": "4 files uploaded"
  },
  "html": "<ul class=\"nhsuk-list nhsuk-list--bullet\">\n  <li><a href=\"#\" class=\"nhsuk-notification-banner__link\">government-strategy.pdf</a></li>\n  <li><a href=\"#\" class=\"nhsuk-notification-banner__link\">government-strategy-v2.pdf</a></li>\n  <li><a href=\"#\" class=\"nhsuk-notification-banner__link\">government-strategy-v3-FINAL.pdf</a></li>\n  <li><a href=\"#\" class=\"nhsuk-notification-banner__link\">government-strategy-v4-FINAL-v2.pdf</a></li>\n</ul>"
}) }}

With custom title

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-notification-banner title="Important information" text="The patient record was updated." />

Blazor

<NhsukNotificationBanner
    Title="@(new NotificationBannerTitleOptions
    {
        Text = "Important information",
    })"
    Text="The patient record was updated."
/>

Nunjucks (upstream)

{% from "nhsuk/components/notification-banner/macro.njk" import notificationBanner %}

{{ notificationBanner({
  "title": {
    "text": "Important information"
  },
  "text": "The patient record was updated."
}) }}

With custom title as string

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-notification-banner title="Important information" text="The patient record was updated." />

Blazor

<NhsukNotificationBanner
    Title="@("Important information")"
    Text="The patient record was updated."
/>

Nunjucks (upstream)

{% from "nhsuk/components/notification-banner/macro.njk" import notificationBanner %}

{{ notificationBanner({
  "title": "Important information",
  "text": "The patient record was updated."
}) }}

With HTML

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-notification-banner
    heading="The patient record was updated"
    html=@(@"<p class=""nhsuk-body"">
  Contact <a class=""nhsuk-notification-banner__link"" href=""#"">example@nhs.uk</a> if you think there's a problem.
</p>")
/>

Blazor

<NhsukNotificationBanner
    Heading="@(new NotificationBannerHeadingOptions
    {
        Text = "The patient record was updated",
    })"
    Html=@(@"<p class=""nhsuk-body"">
  Contact <a class=""nhsuk-notification-banner__link"" href=""#"">example@nhs.uk</a> if you think there's a problem.
</p>")
/>

Nunjucks (upstream)

{% from "nhsuk/components/notification-banner/macro.njk" import notificationBanner %}

{{ notificationBanner({
  "heading": {
    "text": "The patient record was updated"
  },
  "html": "<p class=\"nhsuk-body\">\n  Contact <a class=\"nhsuk-notification-banner__link\" href=\"#\">example@nhs.uk</a> if you think there's a problem.\n</p>"
}) }}

With HTML and heading as string

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-notification-banner
    heading="The patient record was updated"
    html=@(@"<p class=""nhsuk-body"">
  Contact <a class=""nhsuk-notification-banner__link"" href=""#"">example@nhs.uk</a> if you think there's a problem.
</p>")
/>

Blazor

<NhsukNotificationBanner
    Heading="@("The patient record was updated")"
    Html=@(@"<p class=""nhsuk-body"">
  Contact <a class=""nhsuk-notification-banner__link"" href=""#"">example@nhs.uk</a> if you think there's a problem.
</p>")
/>

Nunjucks (upstream)

{% from "nhsuk/components/notification-banner/macro.njk" import notificationBanner %}

{{ notificationBanner({
  "heading": "The patient record was updated",
  "html": "<p class=\"nhsuk-body\">\n  Contact <a class=\"nhsuk-notification-banner__link\" href=\"#\">example@nhs.uk</a> if you think there's a problem.\n</p>"
}) }}

With HTML via call block

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-notification-banner heading="The patient record was updated">
    <p class="nhsuk-body">
      Contact <a class="nhsuk-notification-banner__link" href="#">example@nhs.uk</a> if you think there's a problem.
    </p>
</nhsuk-notification-banner>

Blazor

<NhsukNotificationBanner
    Heading="@(new NotificationBannerHeadingOptions
    {
        Text = "The patient record was updated",
    })"
>
    <p class="nhsuk-body">
      Contact <a class="nhsuk-notification-banner__link" href="#">example@nhs.uk</a> if you think there's a problem.
    </p>
</NhsukNotificationBanner>

Nunjucks (upstream)

{% from "nhsuk/components/notification-banner/macro.njk" import notificationBanner %}

{% call notificationBanner({
  "heading": {
    "text": "The patient record was updated"
  }
}) %}
  <p class="nhsuk-body">
  Contact <a class="nhsuk-notification-banner__link" href="#">example@nhs.uk</a> if you think there's a problem.
</p>
{% endcall %}

With long heading

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-notification-banner
    text="The patient record was withdrawn on 7 March 2014, before being sent in, sent back, queried, lost, found, subjected to public inquiry, lost again, and finally buried in soft peat for three months and recycled as firelighters."
/>

Blazor

<NhsukNotificationBanner
    Text="The patient record was withdrawn on 7 March 2014, before being sent in, sent back, queried, lost, found, subjected to public inquiry, lost again, and finally buried in soft peat for three months and recycled as firelighters."
/>

Nunjucks (upstream)

{% from "nhsuk/components/notification-banner/macro.njk" import notificationBanner %}

{{ notificationBanner({
  "text": "The patient record was withdrawn on 7 March 2014, before being sent in, sent back, queried, lost, found, subjected to public inquiry, lost again, and finally buried in soft peat for three months and recycled as firelighters."
}) }}

With lots of content

Matches upstream

Open on its own page (opens in new tab)

Check if you need to apply the reverse charge to this application

You will have to apply the reverse charge if the applicant supplies any of these services:

constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services
constructing, altering, repairing, extending, demolishing of any works forming, or planned to form, part of the land, including (in particular) walls, roadworks, power lines, electronic communications equipment, aircraft runways, railways, inland waterways, docks and harbours

Razor Pages and MVC

<nhsuk-notification-banner
    heading="Check if you need to apply the reverse charge to this application"
    html=@(@"<p class=""nhsuk-body"">
  You will have to apply the <a href=""#"" class=""nhsuk-notification-banner__link"">reverse charge</a> if the applicant supplies any of these services:
</p>
<ul class=""nhsuk-list nhsuk-list--bullet"">
  <li>constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services</li>
  <li>constructing, altering, repairing, extending, demolishing of any works forming, or planned to form, part of the land, including (in particular) walls, roadworks, power lines, electronic communications equipment, aircraft runways, railways, inland waterways, docks and harbours</li>
</ul>")
/>

Blazor

<NhsukNotificationBanner
    Heading="@(new NotificationBannerHeadingOptions
    {
        Text = "Check if you need to apply the reverse charge to this application",
    })"
    Html=@(@"<p class=""nhsuk-body"">
  You will have to apply the <a href=""#"" class=""nhsuk-notification-banner__link"">reverse charge</a> if the applicant supplies any of these services:
</p>
<ul class=""nhsuk-list nhsuk-list--bullet"">
  <li>constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services</li>
  <li>constructing, altering, repairing, extending, demolishing of any works forming, or planned to form, part of the land, including (in particular) walls, roadworks, power lines, electronic communications equipment, aircraft runways, railways, inland waterways, docks and harbours</li>
</ul>")
/>

Nunjucks (upstream)

{% from "nhsuk/components/notification-banner/macro.njk" import notificationBanner %}

{{ notificationBanner({
  "heading": {
    "text": "Check if you need to apply the reverse charge to this application"
  },
  "html": "<p class=\"nhsuk-body\">\n  You will have to apply the <a href=\"#\" class=\"nhsuk-notification-banner__link\">reverse charge</a> if the applicant supplies any of these services:\n</p>\n<ul class=\"nhsuk-list nhsuk-list--bullet\">\n  <li>constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services</li>\n  <li>constructing, altering, repairing, extending, demolishing of any works forming, or planned to form, part of the land, including (in particular) walls, roadworks, power lines, electronic communications equipment, aircraft runways, railways, inland waterways, docks and harbours</li>\n</ul>"
}) }}

With success variant

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-notification-banner variant="success" text=@("Email sent to example@email.com") />

Blazor

<NhsukNotificationBanner Variant="success" Text=@("Email sent to example@email.com") />

Nunjucks (upstream)

{% from "nhsuk/components/notification-banner/macro.njk" import notificationBanner %}

{{ notificationBanner({
  "variant": "success",
  "text": "Email sent to example@email.com"
}) }}