Skip to main content

Content presentation – Notification banners

Use a notification banner to tell the user something they need to know that's not directly related to the page content.

Information: Version 10

Notification banners added in August 2025

See notification banners in version 10

Open this example in a new tab: notification banners 
<div class="nhsuk-notification-banner" role="region" aria-labelledby="nhsuk-notification-banner-title" data-module="nhsuk-notification-banner">
  <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 7 days left to send your application.
      <a class="nhsuk-notification-banner__link" href="#">View application</a>.
    </p>
  </div>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the notification banner.
text string Required. The text that displays in the notification banner. You can use any string with this option. If you set html, this option is not required and is ignored.
html string Required. The HTML to use within the notification banner. You can use any string with this option. If you set html, text is not required and is ignored.
caller nunjucks-block Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire notification banner component in a call block.
titleText string The title text that displays in the notification banner. You can use any string with this option. Use this option to set text that does not contain HTML. The available default values are 'Important', 'Success', and null:
  • if you do not set type, titleText defaults to "Important"
  • if you set type to success, titleText defaults to "Success"
  • if you set titleHtml, this option is ignored
titleHtml string The title HTML to use within the notification banner. You can use any string with this option. Use this option to set text that contains HTML. If you set titleHtml, the titleText option is ignored.
titleHeadingLevel string Sets heading level for the title only. You can only use values between 1 and 6 with this option. The default is 2.
type string The type of notification to render. You can use only "success" or null values with this option. If you set type to "success", the notification banner sets role to "alert". JavaScript then moves the keyboard focus to the notification banner when the page loads. If you do not set type, the notification banner sets role to "region".
role string Overrides the value of the role attribute for the notification banner. Defaults to "region". If you set type to "success", role defaults to "alert".
titleId string The id for the banner title, and the aria-labelledby attribute in the banner. Defaults to "nhsuk-notification-banner-title".
disableAutoFocus boolean If you set type to "success", or role to "alert", JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set disableAutoFocus to true.
classes string The classes that you want to add to the notification banner.
attributes object The HTML attributes that you want to add to the notification banner, for example, data attributes. 
{% from "notification-banner/macro.njk" import notificationBanner %}

{% set html %}
  <p class="nhsuk-notification-banner__heading">
    You have 7 days left to send your application.
    <a class="nhsuk-notification-banner__link" href="#">View application</a>.
  </p>
{% endset %}

{{ notificationBanner({
  html: html
}) }}

When to use this component

A notification banner lets you tell the user about something that's not directly relevant to the thing they're trying to do on that page of the service.

There are 2 versions of the notification banner:

  • the information banner (blue)
  • the success banner (green)

Use the information banner to tell the user about:

  • something that affects the service as a whole (such as delays in processing applications or planned downtime)
  • something that affects them in particular (for example, an approaching deadline they need to meet)

Use the success banner to tell the user that something they've just done on a previous page was successful (for example, confirming that an email has been sent).

When not to use this component

Use notification banners sparingly. There's evidence that people often miss banners. Using them too often is likely to make this problem worse. See Banner blindness revisited by Nielsen Norman Group.

Avoid showing more than 1 notification banner on the same page. Instead, combine the messages in a single notification banner. If the messages are too different to combine, decide which is your highest priority message and show that one.

If the information is directly relevant to the thing the user is doing on that page, put the information in the main page content instead. If it needs to stand out, use:

Do not use a notification banner to tell the user about validation errors. Use an error message component and error summary component instead.

Do not show a notification banner and an error summary component on the same page. Just show the error summary.

How it works

Put the notification banner at top of the main container. If your page includes breadcrumbs or a back link, place it below these but before the h1.

The notification banner should be the same width as the page's other content, such as components, headings and body text. For example, if the other content takes up two-thirds of the screen on desktop devices, then the notification banner should also take up two-thirds. Read about page layout.

Use role="region" and aria-labelledby="nhsuk-notification-banners-title" (with id="nhsuk-notification-banners-title" on <nhsuk-notification-banners__title>) so that screen reader users can navigate to the notification banner.

Notification banner headings

The notification banner starts with a heading like "Important" or "Success". This is usually an <h2>.

If you need a heading in the banner content, place it in <div class="nhsuk-notification-banner__content">. It will normally be an <h3>.

Do not use a heading for single line notifications. You can apply the nhsuk-notification-banners__heading class to a paragraph to make it stand out.

Using the information banner

Use an information banner to tell users about something that affects the service as a whole.

For example:

  • in a service that lets the user apply for something, they might need to know that it's taking longer than usual to process applications
  • in an account-type service, the user might need to know that the service will be down for scheduled maintenance
Open this example in a new tab: notification banners whole service 
<div class="nhsuk-notification-banner" role="region" aria-labelledby="nhsuk-notification-banner-title" data-module="nhsuk-notification-banner">
  <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 service will be unavailable from 8pm to 9pm on Thursday 1 January 2025.
    </p>
  </div>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the notification banner.
text string Required. The text that displays in the notification banner. You can use any string with this option. If you set html, this option is not required and is ignored.
html string Required. The HTML to use within the notification banner. You can use any string with this option. If you set html, text is not required and is ignored.
caller nunjucks-block Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire notification banner component in a call block.
titleText string The title text that displays in the notification banner. You can use any string with this option. Use this option to set text that does not contain HTML. The available default values are 'Important', 'Success', and null:
  • if you do not set type, titleText defaults to "Important"
  • if you set type to success, titleText defaults to "Success"
  • if you set titleHtml, this option is ignored
titleHtml string The title HTML to use within the notification banner. You can use any string with this option. Use this option to set text that contains HTML. If you set titleHtml, the titleText option is ignored.
titleHeadingLevel string Sets heading level for the title only. You can only use values between 1 and 6 with this option. The default is 2.
type string The type of notification to render. You can use only "success" or null values with this option. If you set type to "success", the notification banner sets role to "alert". JavaScript then moves the keyboard focus to the notification banner when the page loads. If you do not set type, the notification banner sets role to "region".
role string Overrides the value of the role attribute for the notification banner. Defaults to "region". If you set type to "success", role defaults to "alert".
titleId string The id for the banner title, and the aria-labelledby attribute in the banner. Defaults to "nhsuk-notification-banner-title".
disableAutoFocus boolean If you set type to "success", or role to "alert", JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set disableAutoFocus to true.
classes string The classes that you want to add to the notification banner.
attributes object The HTML attributes that you want to add to the notification banner, for example, data attributes. 
{% from "notification-banner/macro.njk" import notificationBanner %}

{{ notificationBanner({
  text: "The service will be unavailable from 8pm to 9pm on Thursday 1 January 2025."
}) }}

If your service is getting more demand than usual, check that you’ve set up "There is a problem with the service" pages and "Service unavailable" pages, and the wording is up to date. Use the patterns in the GOV.UK design system.

You can also use the information banner to tell users information about something that's happening elsewhere in the service. For example:

  • in a case working system, the user might need to know that there are new cases waiting for their attention
  • in an account-type service, you might need to tell the user that there's a deadline approaching or that a payment is overdue
Open this example in a new tab: notification banners second 
<div class="nhsuk-notification-banner" role="region" aria-labelledby="nhsuk-notification-banner-title" data-module="nhsuk-notification-banner">
  <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 7 days left to send your application.
      <a class="nhsuk-notification-banner__link" href="#">View application</a>.
    </p>
  </div>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the notification banner.
text string Required. The text that displays in the notification banner. You can use any string with this option. If you set html, this option is not required and is ignored.
html string Required. The HTML to use within the notification banner. You can use any string with this option. If you set html, text is not required and is ignored.
caller nunjucks-block Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire notification banner component in a call block.
titleText string The title text that displays in the notification banner. You can use any string with this option. Use this option to set text that does not contain HTML. The available default values are 'Important', 'Success', and null:
  • if you do not set type, titleText defaults to "Important"
  • if you set type to success, titleText defaults to "Success"
  • if you set titleHtml, this option is ignored
titleHtml string The title HTML to use within the notification banner. You can use any string with this option. Use this option to set text that contains HTML. If you set titleHtml, the titleText option is ignored.
titleHeadingLevel string Sets heading level for the title only. You can only use values between 1 and 6 with this option. The default is 2.
type string The type of notification to render. You can use only "success" or null values with this option. If you set type to "success", the notification banner sets role to "alert". JavaScript then moves the keyboard focus to the notification banner when the page loads. If you do not set type, the notification banner sets role to "region".
role string Overrides the value of the role attribute for the notification banner. Defaults to "region". If you set type to "success", role defaults to "alert".
titleId string The id for the banner title, and the aria-labelledby attribute in the banner. Defaults to "nhsuk-notification-banner-title".
disableAutoFocus boolean If you set type to "success", or role to "alert", JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set disableAutoFocus to true.
classes string The classes that you want to add to the notification banner.
attributes object The HTML attributes that you want to add to the notification banner, for example, data attributes. 
{% from "notification-banner/macro.njk" import notificationBanner %}

{% set html %}
  <p class="nhsuk-notification-banner__heading">
    You have 7 days left to send your application.
    <a class="nhsuk-notification-banner__link" href="#">View application</a>.
  </p>
{% endset %}

{{ notificationBanner({
  html: html
}) }}

Using the success banner

Use a success banner to confirm an action on a previous page was successful. For example, for steps in a long journey or small repeated tasks.

Open this example in a new tab: notification banners success 
<div class="nhsuk-notification-banner nhsuk-notification-banner--success" role="alert" aria-labelledby="nhsuk-notification-banner-title" data-module="nhsuk-notification-banner">
  <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">
      Patient record updated
    </h3>
    <p>Contact <a class="nhsuk-notification-banner__link" href="#">example@department.nhs.uk</a> if you think there's a problem.</p>
  </div>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the notification banner.
text string Required. The text that displays in the notification banner. You can use any string with this option. If you set html, this option is not required and is ignored.
html string Required. The HTML to use within the notification banner. You can use any string with this option. If you set html, text is not required and is ignored.
caller nunjucks-block Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire notification banner component in a call block.
titleText string The title text that displays in the notification banner. You can use any string with this option. Use this option to set text that does not contain HTML. The available default values are 'Important', 'Success', and null:
  • if you do not set type, titleText defaults to "Important"
  • if you set type to success, titleText defaults to "Success"
  • if you set titleHtml, this option is ignored
titleHtml string The title HTML to use within the notification banner. You can use any string with this option. Use this option to set text that contains HTML. If you set titleHtml, the titleText option is ignored.
titleHeadingLevel string Sets heading level for the title only. You can only use values between 1 and 6 with this option. The default is 2.
type string The type of notification to render. You can use only "success" or null values with this option. If you set type to "success", the notification banner sets role to "alert". JavaScript then moves the keyboard focus to the notification banner when the page loads. If you do not set type, the notification banner sets role to "region".
role string Overrides the value of the role attribute for the notification banner. Defaults to "region". If you set type to "success", role defaults to "alert".
titleId string The id for the banner title, and the aria-labelledby attribute in the banner. Defaults to "nhsuk-notification-banner-title".
disableAutoFocus boolean If you set type to "success", or role to "alert", JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set disableAutoFocus to true.
classes string The classes that you want to add to the notification banner.
attributes object The HTML attributes that you want to add to the notification banner, for example, data attributes. 
{% from "notification-banner/macro.njk" import notificationBanner %}

{% set html %}
  <h3 class="nhsuk-notification-banner__heading">
    Patient record updated
  </h3>
  <p>Contact <a class="nhsuk-notification-banner__link" href="#">example@department.nhs.uk</a> if you think there's a problem.</p>
{% endset %}

{{ notificationBanner({
  html: html,
  type: "success"
}) }}

Remove the success banner when the user moves to a new page.

When the user finishes an entire journey, for example, a service that lets the user register for a thing, use a confirmation page, instead of a success banner.

For long, complex services, use the task list component. You are unlikely to need a success banner on a page with a task list.

Accessibility

To make notification banners accessible:

Research on this component

We need more research to understand:

  • how common it is for users to miss important information in notification banners (including users of assistive technology, who might skip straight to the h1)
  • when it's helpful to allow users to dismiss notifications, and how to do this

Help us improve this guidance

Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.

Feed back or share insights on GitHub

Read more about how to feed back or share insights.

If you have any questions, get in touch with the service manual team.

Updated: August 2025