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

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