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.

Version 10

Notification banners updated in August 2025

See updates to notification banners in version 10

<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

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.

Nunjucks arguments for default notification banners
Name	Type	Required	Description
id	string	false	The ID of the notification banner.
text	string	true	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	true	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	false	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	false	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	false	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	false	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	false	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	false	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	false	The `id` for the banner title, and the `aria-labelledby` attribute in the banner. Defaults to `"nhsuk-notification-banner-title"`.
disableAutoFocus	boolean	false	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	false	The classes that you want to add to the notification banner.
attributes	object	false	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.

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

HTML

<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

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.

Nunjucks arguments for whole service notification banners
Name	Type	Required	Description
id	string	false	The ID of the notification banner.
text	string	true	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	true	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	false	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	false	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	false	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	false	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	false	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	false	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	false	The `id` for the banner title, and the `aria-labelledby` attribute in the banner. Defaults to `"nhsuk-notification-banner-title"`.
disableAutoFocus	boolean	false	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	false	The classes that you want to add to the notification banner.
attributes	object	false	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

HTML

<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

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.

Nunjucks arguments for default notification banners
Name	Type	Required	Description
id	string	false	The ID of the notification banner.
text	string	true	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	true	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	false	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	false	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	false	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	false	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	false	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	false	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	false	The `id` for the banner title, and the `aria-labelledby` attribute in the banner. Defaults to `"nhsuk-notification-banner-title"`.
disableAutoFocus	boolean	false	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	false	The classes that you want to add to the notification banner.
attributes	object	false	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
}) }}

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

HTML

<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

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.

Nunjucks arguments for success notification banners
Name	Type	Required	Description
id	string	false	The ID of the notification banner.
text	string	true	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	true	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	false	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	false	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	false	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	false	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	false	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	false	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	false	The `id` for the banner title, and the `aria-labelledby` attribute in the banner. Defaults to `"nhsuk-notification-banner-title"`.
disableAutoFocus	boolean	false	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	false	The classes that you want to add to the notification banner.
attributes	object	false	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:

use a heading like "Success" so that you're not relying on colour alone to convey meaning (to meet WCAG 2.2 success criterion 1.4.1 Use of colour)
use the same heading for banners across a service so that you're identifying components that work in the same way consistently (to meet WCAG 2.2 success criterion 3.2.4 Consistent identification)
the success banner includes role="alert" so the focus state shifts to the notification banner on page load.

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.

Feedback or share insights on GitHub

Read more about how to feedback or share insights.

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

Updated: August 2025

Content presentation - Notification banners

Notification banners updated in August 2025

When to use this component

When not to use this component

How it works

Notification banner headings

Using the information banner

Using the success banner

Accessibility

Research on this component

Help us improve this guidance