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 with heading class

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

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({
  heading: {
    text: "You have 9 days to send a response.",
    element: "p"
  }
}) }}

Notification banner success with HTML

Open this example in a new tab: Notification banner success with 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-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",
  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>'
}) }}

Notification banner success with HTML via call block

Open this example in a new tab: Notification banner success with HTML via call block

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-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 -%}

{% 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 %}

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

Notification banner with custom title

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

Important information

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 information
    </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({
  title: {
    text: "Important information"
  },
  text: "The patient record was updated."
}) }}

Notification banner with HTML

Open this example in a new tab: Notification banner with 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({
  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>'
}) }}

Notification banner with HTML via call block

Open this example in a new tab: Notification banner with HTML via call block

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 -%}

{% 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 %}

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

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"
}) }}