This is an internal development app.
To learn how to use the GOV.UK Design System in your project, see Get started.

Skip to main content
  1. GOV.UK Frontend
  2. All components
  3. Notification banner

Notification banner

Notification banner

Open this example in a new tab: notification banner

Code

Markup

<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">
      This publication was withdrawn on 7 March 2014.
    </p>
  </div>
</div>

Macro

{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  text: "This publication was withdrawn on 7 March 2014."
}) }}

Notification banner paragraph as html heading

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

Code

Markup

<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 9 days to send a response.</p>
  </div>
</div>

Macro

{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

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

Notification banner with text as html

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

Code

Markup

<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">
    <h3 class="govuk-notification-banner__heading">
      This publication was withdrawn on 7 March 2014
    </h3>
    <p class="govuk-body">
      Archived and replaced by the <a href="#" class="govuk-notification-banner__link">new planning guidance</a> launched 6 March 2014 on an external website
    </p>
  </div>
</div>

Macro

{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  html:
    '<h3 class="govuk-notification-banner__heading">\n' +
    "  This publication was withdrawn on 7 March 2014\n" +
    "</h3>\n" +
    '<p class="govuk-body">\n' +
    '  Archived and replaced by the <a href="#" class="govuk-notification-banner__link">new planning guidance</a> launched 6 March 2014 on an external website\n' +
    "</p>\n"
}) }}

Notification banner with type as success

Open this example in a new tab: notification banner with type as success

Code

Markup

<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">
    <p class="govuk-notification-banner__heading">
      Email sent to example@email.com
    </p>
  </div>
</div>

Macro

{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

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

Notification banner success with custom html

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

Code

Markup

<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">
      4 files uploaded
    </h3>
    <ul class="govuk-!-margin-0 govuk-list">
      <li><a href="link-1" class="govuk-notification-banner__link">government-strategy.pdf</a></li>
      <li><a href="link-2" class="govuk-notification-banner__link">government-strategy-v1.pdf</a></li>
    </ul>
  </div>
</div>

Macro

{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  type: "success",
  html:
    '<h3 class="govuk-notification-banner__heading">\n' +
    "  4 files uploaded\n" +
    "</h3>\n" +
    '<ul class="govuk-!-margin-0 govuk-list">\n' +
    '  <li><a href="link-1" class="govuk-notification-banner__link">government-strategy.pdf</a></li>\n' +
    '  <li><a href="link-2" class="govuk-notification-banner__link">government-strategy-v1.pdf</a></li>\n' +
    "</ul>\n"
}) }}

Notification banner with a list

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

Code

Markup

<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">
    <h3 class="govuk-notification-banner__heading">4 files uploaded</h3>
    <ul class="govuk-list govuk-list--bullet govuk-!-margin-bottom-0">
      <li><a href="#" class="govuk-notification-banner__link">government-strategy.pdf</a></li>
      <li><a href="#" class="govuk-notification-banner__link">government-strategy-v2.pdf</a></li>
      <li><a href="#" class="govuk-notification-banner__link">government-strategy-v3-FINAL.pdf</a></li>
      <li><a href="#" class="govuk-notification-banner__link">government-strategy-v4-FINAL-v2.pdf</a></li>
    </ul>
  </div>
</div>

Macro

{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  html:
    '<h3 class="govuk-notification-banner__heading">4 files uploaded</h3>\n' +
    '<ul class="govuk-list govuk-list--bullet govuk-!-margin-bottom-0">\n' +
    '  <li><a href="#" class="govuk-notification-banner__link">government-strategy.pdf</a></li>\n' +
    '  <li><a href="#" class="govuk-notification-banner__link">government-strategy-v2.pdf</a></li>\n' +
    '  <li><a href="#" class="govuk-notification-banner__link">government-strategy-v3-FINAL.pdf</a></li>\n' +
    '  <li><a href="#" class="govuk-notification-banner__link">government-strategy-v4-FINAL-v2.pdf</a></li>\n' +
    "</ul>\n"
}) }}

Notification banner with long heading

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

Code

Markup

<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">
      This publication 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 "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  text: "This publication 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

Code

Markup

<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">
    <h3 class="govuk-notification-banner__heading">
      Check if you need to apply the reverse charge to this application
    </h3>
    <p class="govuk-body">
      You will have to apply the <a href="#" class="govuk-notification-banner__link">reverse charge</a> if the applicant supplies any of these services:
    </p>
    <ul class="govuk-list govuk-list--bullet govuk-list--spaced">
      <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 "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  html:
    '<h3 class="govuk-notification-banner__heading">\n' +
    "  Check if you need to apply the reverse charge to this application\n" +
    "</h3>\n" +
    '<p class="govuk-body">\n' +
    '  You will have to apply the <a href="#" class="govuk-notification-banner__link">reverse charge</a> if the applicant supplies any of these services:\n' +
    "</p>\n" +
    '<ul class="govuk-list govuk-list--bullet govuk-list--spaced">\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>\n"
}) }}

Notification banner auto-focus disabled, with type as success

Open this example in a new tab: notification banner auto-focus disabled, with type as success

Code

Markup

<div class="govuk-notification-banner govuk-notification-banner--success" role="alert" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner" data-disable-auto-focus="true">
  <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">
    <p class="govuk-notification-banner__heading">
      Email sent to example@email.com
    </p>
  </div>
</div>

Macro

{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  type: "success",
  disableAutoFocus: true,
  text: "Email sent to example@email.com"
}) }}

Notification banner auto-focus explicitly enabled, with type as success

Open this example in a new tab: notification banner auto-focus explicitly enabled, with type as success

Code

Markup

<div class="govuk-notification-banner govuk-notification-banner--success" role="alert" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner" data-disable-auto-focus="false">
  <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">
    <p class="govuk-notification-banner__heading">
      Email sent to example@email.com
    </p>
  </div>
</div>

Macro

{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  type: "success",
  disableAutoFocus: false,
  text: "Email sent to example@email.com"
}) }}

Notification banner role=alert overridden to role=region, with type as success

Open this example in a new tab: notification banner role=alert overridden to role=region, with type as success

Code

Markup

<div class="govuk-notification-banner govuk-notification-banner--success" 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">
      Success
    </h2>
  </div>
  <div class="govuk-notification-banner__content">
    <p class="govuk-notification-banner__heading">
      Email sent to example@email.com
    </p>
  </div>
</div>

Macro

{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  type: "success",
  role: "region",
  text: "Email sent to example@email.com"
}) }}

Notification banner custom tabindex

Open this example in a new tab: notification banner custom tabindex

Code

Markup

<div class="govuk-notification-banner govuk-notification-banner--success" role="alert" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner" tabindex="2">
  <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">
    <p class="govuk-notification-banner__heading">
      Email sent to example@email.com
    </p>
  </div>
</div>

Macro

{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  type: "success",
  text: "Email sent to example@email.com",
  attributes: {
    tabindex: 2
  }
}) }}