Notification banner

Notification banner 📸

Open this example in a new tab

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 with text as html

Open this example in a new tab

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">
      The following 4 files are available
    </p>
    <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">\n' +
    "  This publication was withdrawn on 7 March 2014\n" +
    "</h3>\n" +
    '<p class="govuk-body">\n' +
    "  The following 4 files are available\n" +
    "</p>\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 type as success

Open this example in a new tab

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 with long heading

Open this example in a new tab

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

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