Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

Notification banner

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

Notification banner default

Open this example in a new tab: Notification banner default

Important

The patient record was updated.

Code

Markup

<div class="nhsuk-notification-banner" data-module="nhsuk-notification-banner" role="region" aria-labelledby="nhsuk-notification-banner-title">
  <div class="nhsuk-notification-banner__header">
    <h2 class="nhsuk-notification-banner__title" id="nhsuk-notification-banner-title">
      Important
    </h2>
  </div>
  <div class="nhsuk-notification-banner__content">
    <p class="nhsuk-notification-banner__heading">
      The patient record was updated.
    </p>
  </div>
</div>

Macro

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

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

Notification banner paragraph as html heading

Open this example in a new tab: Notification banner paragraph as html heading

Important

You have 9 days to send a response.

Code

Markup

<div class="nhsuk-notification-banner" data-module="nhsuk-notification-banner" role="region" aria-labelledby="nhsuk-notification-banner-title">
  <div class="nhsuk-notification-banner__header">
    <h2 class="nhsuk-notification-banner__title" id="nhsuk-notification-banner-title">
      Important
    </h2>
  </div>
  <div class="nhsuk-notification-banner__content">
    <p class="nhsuk-notification-banner__heading">You have 9 days to send a response.</p>
  </div>
</div>

Macro

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

{{ notificationBanner({
  html: '<p class="nhsuk-notification-banner__heading">You have 9 days to send a response.</p>'
}) }}

Notification banner success with custom html

Open this example in a new tab: Notification banner success with custom html

Code

Markup

<div class="nhsuk-notification-banner nhsuk-notification-banner--success" data-module="nhsuk-notification-banner" role="alert" aria-labelledby="nhsuk-notification-banner-title">
  <div class="nhsuk-notification-banner__header">
    <h2 class="nhsuk-notification-banner__title" id="nhsuk-notification-banner-title">
      Success
    </h2>
  </div>
  <div class="nhsuk-notification-banner__content">
    <h3 class="nhsuk-notification-banner__heading">
      4 files uploaded
    </h3>
    <ul class="nhsuk-u-margin-0 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>
  </div>
</div>

Macro

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

{{ notificationBanner({
  variant: "success",
  html: '<h3 class="nhsuk-notification-banner__heading">\n  4 files uploaded\n</h3>\n<ul class="nhsuk-u-margin-0 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>'
}) }}

Notification banner with a list

Open this example in a new tab: Notification banner with a list

Important

4 files uploaded

Code

Markup

<div class="nhsuk-notification-banner" data-module="nhsuk-notification-banner" role="region" aria-labelledby="nhsuk-notification-banner-title">
  <div class="nhsuk-notification-banner__header">
    <h2 class="nhsuk-notification-banner__title" id="nhsuk-notification-banner-title">
      Important
    </h2>
  </div>
  <div class="nhsuk-notification-banner__content">
    <h3 class="nhsuk-notification-banner__heading">4 files uploaded</h3>
    <ul class="nhsuk-list nhsuk-list--bullet nhsuk-u-margin-bottom-0">
      <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>
  </div>
</div>

Macro

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

{{ notificationBanner({
  html: '<h3 class="nhsuk-notification-banner__heading">4 files uploaded</h3>\n<ul class="nhsuk-list nhsuk-list--bullet nhsuk-u-margin-bottom-0">\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>'
}) }}

Notification banner with long heading

Open this example in a new tab: Notification banner with long heading

Important

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.

Code

Markup

<div class="nhsuk-notification-banner" data-module="nhsuk-notification-banner" role="region" aria-labelledby="nhsuk-notification-banner-title">
  <div class="nhsuk-notification-banner__header">
    <h2 class="nhsuk-notification-banner__title" id="nhsuk-notification-banner-title">
      Important
    </h2>
  </div>
  <div class="nhsuk-notification-banner__content">
    <p class="nhsuk-notification-banner__heading">
      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.
    </p>
  </div>
</div>

Macro

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

Notification banner with lots of content

Open this example in a new tab: Notification banner with lots of content

Important

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
Code

Markup

<div class="nhsuk-notification-banner" data-module="nhsuk-notification-banner" role="region" aria-labelledby="nhsuk-notification-banner-title">
  <div class="nhsuk-notification-banner__header">
    <h2 class="nhsuk-notification-banner__title" id="nhsuk-notification-banner-title">
      Important
    </h2>
  </div>
  <div class="nhsuk-notification-banner__content">
    <h3 class="nhsuk-notification-banner__heading">
      Check if you need to apply the reverse charge to this application
    </h3>
    <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>
  </div>
</div>

Macro

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

{{ notificationBanner({
  html: '<h3 class="nhsuk-notification-banner__heading">\n  Check if you need to apply the reverse charge to this application\n</h3>\n<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>'
}) }}

Notification banner with success variant

Open this example in a new tab: Notification banner with success variant

Code

Markup

<div class="nhsuk-notification-banner nhsuk-notification-banner--success" data-module="nhsuk-notification-banner" role="alert" aria-labelledby="nhsuk-notification-banner-title">
  <div class="nhsuk-notification-banner__header">
    <h2 class="nhsuk-notification-banner__title" id="nhsuk-notification-banner-title">
      Success
    </h2>
  </div>
  <div class="nhsuk-notification-banner__content">
    <p class="nhsuk-notification-banner__heading">
      Email sent to example@email.com
    </p>
  </div>
</div>

Macro

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

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

Notification banner with text as html

Open this example in a new tab: Notification banner with text as html

Important

The patient record was updated

Contact example@nhs.uk if you think there's a problem.

Code

Markup

<div class="nhsuk-notification-banner" data-module="nhsuk-notification-banner" role="region" aria-labelledby="nhsuk-notification-banner-title">
  <div class="nhsuk-notification-banner__header">
    <h2 class="nhsuk-notification-banner__title" id="nhsuk-notification-banner-title">
      Important
    </h2>
  </div>
  <div class="nhsuk-notification-banner__content">
    <h3 class="nhsuk-notification-banner__heading">
      The patient record was updated
    </h3>
    <p class="nhsuk-body">
      Contact <a class="nhsuk-notification-banner__link" href="#">example@nhs.uk</a> if you think there's a problem.
    </p>
  </div>
</div>

Macro

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

{{ notificationBanner({
  html: '<h3 class="nhsuk-notification-banner__heading">\n  The patient record was updated\n</h3>\n<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>'
}) }}