Components

Notification banner

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

Telling the user about a problem that affects the whole service

Use a purple notification banner if the user needs to know about a problem with the service as a whole.

Open this notification banner example in a new tab

Important

There may be a delay in processing your application because of the coronavirus outbreak.

HTML 
<div
  class="govuk-notification-banner"
  role="region"
  aria-labelledby="govuk-notification-banner-title"
  data-module="govuk-notification-banner"
>
  <div class="govuk-notification-banner__header">
    <h2
      class="govuk-notification-banner__title"
      id="govuk-notification-banner-title"
    >
      Important
    </h2>
  </div>
  <div class="govuk-notification-banner__content">
    <p class="govuk-notification-banner__heading">
      There may be a delay in processing your application because of the
      coronavirus outbreak.
    </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.

Primary options
Name Type Description
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 "govuk-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 "moduk/components/notification-banner/macro.njk" import modukNotificationBanner -%}

{{ modukNotificationBanner({
  text: 'There may be a delay in processing your application because of the coronavirus outbreak.'
}) -}}

Telling the user about something that’s happening elsewhere

Use a purple notification banner if the user needs to know about something that’s happening elsewhere in the service.

Open this notification banner example in a new tab

Important

You have 7 days left to send your application.View application.

HTML 
<div
  class="govuk-notification-banner"
  role="region"
  aria-labelledby="govuk-notification-banner-title"
  data-module="govuk-notification-banner"
>
  <div class="govuk-notification-banner__header">
    <h2
      class="govuk-notification-banner__title"
      id="govuk-notification-banner-title"
    >
      Important
    </h2>
  </div>
  <div class="govuk-notification-banner__content">
    <p class="govuk-notification-banner__heading">
      You have 7 days left to send your application.
      <a class="govuk-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.

Primary options
Name Type Description
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 "govuk-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 "moduk/components/notification-banner/macro.njk" import modukNotificationBanner -%}

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

{{ modukNotificationBanner({
  html: html
}) -}}

Reacting to something the user has done

Use the green version of the notification banner to confirm that something the user is expecting to happen has happened.

Open this notification banner example in a new tab
HTML 
<div
  class="govuk-notification-banner govuk-notification-banner--success"
  role="alert"
  aria-labelledby="govuk-notification-banner-title"
  data-module="govuk-notification-banner"
>
  <div class="govuk-notification-banner__header">
    <h2
      class="govuk-notification-banner__title"
      id="govuk-notification-banner-title"
    >
      Success
    </h2>
  </div>
  <div class="govuk-notification-banner__content">
    <h3 class="govuk-notification-banner__heading">
      Training outcome recorded and trainee withdrawn
    </h3>
    <p class="govuk-body">
      Contact
      <a class="govuk-notification-banner__link" href="#"
        >example@department.gov.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.

Primary options
Name Type Description
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 "govuk-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 "moduk/components/notification-banner/macro.njk" import modukNotificationBanner -%}

{% set html %}
  <h3 class="govuk-notification-banner__heading">
    Training outcome recorded and trainee withdrawn
  </h3>
  <p class="govuk-body">Contact <a class="govuk-notification-banner__link" href="#">example@department.gov.uk</a> if you think there’s a problem.</p>
{% endset -%}

{{ modukNotificationBanner({
  html: html,
  type: 'success'
}) -}}

See GOV.UK notification banner component guidance for:

  • when to use this component
  • when not to use it
  • how it works

Changes from the GOV.UK version

MOD.UK Design System components are closely based on GOV.UK Design System components.

For this component we’ve changed the font and colours.

Have you tested this component?

Let us know how we could improve this component or share your user research findings.

Email the MOD.UK Design System team at design-system@digital.mod.uk

Need help?

Email the MOD.UK Design System team at design-system@digital.mod.uk if you have questions or feedback.