Notification banner – GOV.UK Design System

<!DOCTYPE html> <html lang="en" class="govuk-template"> <head> <meta charset="utf-8"> <title>Notification banner – GOV.UK Design System</title> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="theme-color" content="#0b0c0c"> <link rel="icon" sizes="48x48" href="/assets/images/favicon.ico"> <link rel="icon" sizes="any" href="/assets/images/favicon.svg" type="image/svg+xml"> <link rel="mask-icon" href="/assets/images/govuk-icon-mask.svg" color="#0b0c0c"> <link rel="apple-touch-icon" href="/assets/images/govuk-icon-180.png"> <link rel="manifest" href="/assets/manifest.json"> <meta name="og:title" content="Notification banner"> <meta name="description" content="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"> <meta name="og:description" content="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"> <link rel="canonical" href="https://design-system.service.gov.uk/components/notification-banner/"> <link href="/stylesheets/main-5d98294379237e7335d379f1004c3034.css" rel="stylesheet" media="all"> <meta property="og:image" content="https://design-system.service.gov.uk/assets/images/govuk-opengraph-image.png"> </head> <body class="govuk-template__body" data-module="app-navigation"> <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script> <a id="top"></a> <script> /** * If cookie policy changes and/or the user preferences object format needs to * change, bump this version up afterwards. The user should then be shown the * banner again to consent to the new policy. * * Note that because isValidCookieConsent checks that the version in the user's * cookie is equal to or greater than this number, you should be careful to * check backwards compatibility when changing the object format. */ window.GDS_CONSENT_COOKIE_VERSION = 2; </script> <div class="govuk-cookie-banner" data-nosnippet role="region" aria-label="Cookies on GOV.UK Design System" hidden data-module="govuk-cookie-banner" data-cookie-category="analytics"> <div class="govuk-cookie-banner__message app-width-container js-cookie-banner-message govuk-width-container"> <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds"> <h2 class="govuk-cookie-banner__heading govuk-heading-m"> Cookies on GOV.UK Design System </h2> <div class="govuk-cookie-banner__content"> <p class="govuk-body">We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.</p> <p class="govuk-body">We also use essential cookies to remember if you’ve accepted analytics cookies.</p> </div> </div> </div> <div class="govuk-button-group"> <button type="button" class="govuk-button js-cookie-banner-accept" data-module="govuk-button"> Accept analytics cookies </button> <button type="button" class="govuk-button js-cookie-banner-reject" data-module="govuk-button"> Reject analytics cookies </button> <a class="govuk-link" href="/cookies/">View cookies</a> </div> </div> <div class="govuk-cookie-banner__message js-cookie-banner-confirmation-accept app-width-container govuk-width-container" role="alert" hidden> <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds"> <div class="govuk-cookie-banner__content"> <p class="govuk-body">You’ve accepted analytics cookies. You can <a class="govuk-link" href="/cookies/">change your cookie settings</a> at any time.</p> </div> </div> </div> <div class="govuk-button-group"> <button type="button" class="govuk-button js-cookie-banner-hide js-cookie-banner-hide--accept" data-module="govuk-button"> Hide cookie message </button> </div> </div> <div class="govuk-cookie-banner__message js-cookie-banner-confirmation-reject app-width-container govuk-width-container" role="alert" hidden> <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds"> <div class="govuk-cookie-banner__content"> <p class="govuk-body">You’ve rejected analytics cookies. You can <a class="govuk-link" href="/cookies/">change your cookie settings</a> at any time.</p> </div> </div> </div> <div class="govuk-button-group"> <button type="button" class="govuk-button js-cookie-banner-hide js-cookie-banner-hide--reject" data-module="govuk-button"> Hide cookie message </button> </div> </div> </div> <script> (function () { // Skip early setup when cookie banner component is not supported if (!('noModule' in HTMLScriptElement.prototype)) { return } /** * Check the cookie preferences object. * * If the consent object is not present, malformed, or incorrect version, * returns false, otherwise returns true. * * This is also duplicated in cookie-functions.js - the two need to be kept in sync */ function isValidConsentCookie (options) { return (options && options.version >= window.GDS_CONSENT_COOKIE_VERSION) } function categoryIsNull (options) { return (options && options.analytics === null) } // Don't show the banner on the cookies page if (window.location.pathname !== "/cookies/") { // Show the banner if there is no consent cookie or if it is outdated var currentConsentCookie = document.cookie.match(new RegExp('(^| )design_system_cookies_policy=([^;]+)')) const cookieData = currentConsentCookie && JSON.parse(currentConsentCookie[2]); const cookieNotSet = (!currentConsentCookie || !isValidConsentCookie(cookieData)) const categoryNotSet = isValidConsentCookie(cookieData) && categoryIsNull(cookieData) if (cookieNotSet || categoryNotSet) { var cookieBanner = document.querySelector("[data-cookie-category='analytics']") cookieBanner.removeAttribute('hidden') } } })() </script> <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a> <header class="govuk-header govuk-header--full-width-border" role="banner"> <div class="govuk-header__container app-width-container"> <div class="govuk-header__logo app-header-logo"> <a href="/" class="govuk-header__link govuk-header__link--homepage"> <svg focusable="false" role="img" class="govuk-header__logotype" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 30" height="30" width="148" aria-label="GOV.UK" > <title>GOV.UK</title> <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path> </svg> <span class="govuk-header__product-name"> Design System </span> </a> </div> <div class="app-site-search" data-module="app-search" data-search-index="/search-index-0864382ee8f73428a07ab1782893f578.json"> <label class="govuk-visually-hidden" for="app-site-search__input">Search Design system</label> <a class="app-site-search__link govuk-link" href="/sitemap/">Sitemap</a> </div> <button type="button" class="govuk-header__menu-button app-navigation__menu-button js-app-navigation__toggler" aria-controls="app-navigation" hidden> Menu </button> </div> </header> <nav id="app-navigation" class="app-navigation js-app-navigation govuk-clearfix" role="navigation" aria-labelledby="app-navigation-heading"> <h2 class="govuk-visually-hidden" id="app-navigation-heading">Menu</h2> <ul class="app-navigation__list app-width-container"> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/get-started/"> Get started </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Get started </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Get started" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/"> Get started overview </a> </li> <li> <h3 class="app-navigation__theme">Setup guides</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/prototyping/"> Prototyping </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/production/"> Production </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">How to guides</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/labels-legends-headings/"> Making labels and legends headings </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/extending-and-modifying-components/"> Extending and modifying components in production </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/focus-states/"> Understanding focus state styles </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/new-type-scale/"> Updating your service to use the new type scale </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/styles/"> Styles </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Styles </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Styles" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/"> Styles overview </a> </li> <li> <h3 class="app-navigation__theme">Page structure</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/page-template/"> Page template </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/layout/"> Layout </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/spacing/"> Spacing </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/section-break/"> Section break </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Typography</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/typeface/"> Typeface </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/type-scale/"> Type scale </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/headings/"> Headings </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/paragraphs/"> Paragraphs </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/links/"> Links </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/lists/"> Lists </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/font-override-classes/"> Font override classes </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Visual elements</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/colour/"> Colour </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/images/"> Images </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item app-navigation__list-item--current"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/components/"> Components </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Components </button>  <ul class="app-navigation__subnav js-app-navigation__subnav app-navigation__subnav--active" aria-label="Components" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/"> Components overview </a> </li> <li> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/accordion/"> Accordion </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/back-link/"> Back link </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/breadcrumbs/"> Breadcrumbs </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/button/"> Button </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/character-count/"> Character count </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/checkboxes/"> Checkboxes </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/cookie-banner/"> Cookie banner </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/date-input/"> Date input </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/details/"> Details </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-message/"> Error message </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-summary/"> Error summary </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/exit-this-page/"> Exit this page </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/fieldset/"> Fieldset </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/file-upload/"> File upload </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/footer/"> GOV.UK footer </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/header/"> GOV.UK header </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/inset-text/"> Inset text </a> </li> <li class="app-navigation__subnav-item app-navigation__subnav-item--current"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/notification-banner/"> Notification banner </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/pagination/"> Pagination </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/panel/"> Panel </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/password-input/"> Password input </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/phase-banner/"> Phase banner </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/radios/"> Radios </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/select/"> Select </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/service-navigation/"> Service navigation </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/skip-link/"> Skip link </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/summary-list/"> Summary list </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/table/"> Table </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tabs/"> Tabs </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tag/"> Tag </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/task-list/"> Task list </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/text-input/"> Text input </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/textarea/"> Textarea </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/warning-text/"> Warning text </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/patterns/"> Patterns </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Patterns </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Patterns" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/"> Patterns overview </a> </li> <li> <h3 class="app-navigation__theme">Ask users for…</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/addresses/"> Addresses </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/bank-details/"> Bank details </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/dates/"> Dates </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/email-addresses/"> Email addresses </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/equality-information/"> Equality information </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/gender-or-sex/"> Gender or sex </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/names/"> Names </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/national-insurance-numbers/"> National Insurance numbers </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/passwords/"> Passwords </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/payment-card-details/"> Payment card details </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/phone-numbers/"> Phone numbers </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Help users to…</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/check-a-service-is-suitable/"> Check a service is suitable </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/check-answers/"> Check answers </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/complete-multiple-tasks/"> Complete multiple tasks </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/confirm-a-phone-number/"> Confirm a phone number </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/confirm-an-email-address/"> Confirm an email address </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/contact-a-department-or-service-team/"> Contact a department or service team </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/create-a-username/"> Create a username </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/create-accounts/"> Create accounts </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/exit-a-page-quickly/"> Exit a page quickly </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/navigate-a-service/"> Navigate a service </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/start-using-a-service/"> Start using a service </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/validation/"> Recover from validation errors </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Pages</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/confirmation-pages/"> Confirmation pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/cookies-page/"> Cookies page </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/page-not-found-pages/"> Page not found pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/problem-with-the-service-pages/"> There is a problem with the service pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/question-pages/"> Question pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/service-unavailable-pages/"> Service unavailable pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/step-by-step-navigation/"> Step by step navigation </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/community/"> Community </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Community </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Community" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/"> Community overview </a> </li> <li> <h3 class="app-navigation__theme">What we’re working on</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/upcoming-components-patterns/"> Upcoming components and patterns </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/roadmap/"> Roadmap </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Ways to get involved</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/share-research-findings/"> Share findings about your users </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/propose-a-component-or-pattern/"> Propose a component or pattern </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/develop-a-component-or-pattern/"> Develop a component or pattern </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/propose-a-content-change-using-github/"> Propose a content change using GitHub </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">How we work</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/community-principles/"> Community principles </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/contribution-criteria/"> Contribution criteria </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-working-group/"> Design System working group </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/blogs-talks-podcasts/"> Blog posts, videos and podcasts </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Resources</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/resources-and-tools/"> Resources and tools </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Events and workshops</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day/"> Design System Day Events </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day-2022/"> Design System Day 2022 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day-2023/"> Design System Day 2023 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day-2024/"> Design System Day 2024 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/code-of-conduct/"> Code of Conduct </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/accessibility/"> Accessibility </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Accessibility </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Accessibility" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/accessibility/"> Accessibility overview </a> </li> <li> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/accessibility/wcag-2.2/"> Changes to the Design System to meet WCAG 2.2 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/accessibility/accessibility-strategy/"> Accessibility strategy </a> </li> </ul> </li> </ul> </li> </ul> </nav> <div class="app-split-pane app-width-container"> <div class="app-split-pane__nav">  <nav class="app-subnav" aria-labelledby="app-subnav-heading"> <h2 class="govuk-visually-hidden" id="app-subnav-heading">Pages in this section</h2> <ul class="app-subnav__section"> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/accordion/"> Accordion </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/back-link/"> Back link </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/breadcrumbs/"> Breadcrumbs </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/button/"> Button </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/character-count/"> Character count </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/checkboxes/"> Checkboxes </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/cookie-banner/"> Cookie banner </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/date-input/"> Date input </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/details/"> Details </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-message/"> Error message </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-summary/"> Error summary </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/exit-this-page/"> Exit this page </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/fieldset/"> Fieldset </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/file-upload/"> File upload </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/footer/"> GOV.UK footer </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/header/"> GOV.UK header </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/inset-text/"> Inset text </a> </li> <li class="app-subnav__section-item app-subnav__section-item--current"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/notification-banner/" aria-current="page"> Notification banner </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/pagination/"> Pagination </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/panel/"> Panel </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/password-input/"> Password input </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/phase-banner/"> Phase banner </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/radios/"> Radios </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/select/"> Select </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/service-navigation/"> Service navigation </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/skip-link/"> Skip link </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/summary-list/"> Summary list </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/table/"> Table </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tabs/"> Tabs </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tag/"> Tag </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/task-list/"> Task list </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/text-input/"> Text input </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/textarea/"> Textarea </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/warning-text/"> Warning text </a> </li> </ul> </nav> </div> <div class="app-split-pane__content"> <main id="main-content" class="app-content" role="main"> <span class="govuk-caption-xl"> Components </span> <h1 class="govuk-heading-xl"> Notification banner </h1> <div class="app-prose-scope"> <p>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.</p> <div class="app-example-wrapper" id="notification-banner-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/notification-banner/default/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: notification banner</span> </a> </div> <iframe title="Notification banner example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/notification-banner/default/index.html" loading="eager"></iframe> </div> <span id="options-notification-banner-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#notification-banner-example-html" role="tab" aria-controls="notification-banner-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#notification-banner-example-nunjucks" role="tab" aria-controls="notification-banner-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#notification-banner-example-html" aria-controls="notification-banner-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="notification-banner-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"region"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"govuk-notification-banner-title"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-notification-banner"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner__header"</span>></span> <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner__title"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"govuk-notification-banner-title"</span>></span> Important <span class="hljs-tag"></<span class="hljs-name">h2</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner__content"</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner__heading"</span>></span> You have 7 days left to send your application. <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>View application<span class="hljs-tag"></<span class="hljs-name">a</span>></span>. <span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#notification-banner-example-nunjucks" aria-controls="notification-banner-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="notification-banner-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-notification-banner-example-details"> <summary class="govuk-details__summary"> <span class="govuk-details__summary-text"> <span data-components="github-component-arguments">Nunjucks macro options</span> </span> </summary> <div class="govuk-details__text"> <p> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. </p> <p> Some options are required for the macro to work; these are marked as “Required” in the option description. </p> <p> If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. </p> <table class="govuk-table app-options__table" id="options-notification-banner-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> The text that displays in the notification banner. You can use any string with this option. If you set <code>html</code>, this option is not required and is ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> The HTML to use within the notification banner. You can use any string with this option. If you set <code>html</code>, <code>text</code> is not required and is ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">caller</th> <td class="govuk-table__cell">nunjucks-block</td> <td class="govuk-table__cell"> Not strictly a parameter but <a href="https://mozilla.github.io/nunjucks/templating.html#call">Nunjucks code convention</a>. Using a <code>call</code> 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 <code>call</code> block. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title<wbr>Text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> 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:<ul> <li>if you do not set <code>type</code>, <code>titleText</code> defaults to <code>"Important"</code></li> <li>if you set <code>type</code> to <code>success</code>, <code>titleText</code> defaults to <code>"Success"</code></li> <li>if you set <code>titleHtml</code>, this option is ignored</li> </ul> </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title<wbr>Html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> 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 <code>titleHtml</code>, the <code>titleText</code> option is ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title<wbr>Heading<wbr>Level</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Sets heading level for the title only. You can only use values between <code>1</code> and <code>6</code> with this option. The default is <code>2</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The type of notification to render. You can use only <code>"success"</code> or <code>null</code> values with this option. If you set <code>type</code> to <code>"success"</code>, the notification banner sets <code>role</code> to <code>"alert"</code>. JavaScript then moves the keyboard focus to the notification banner when the page loads. If you do not set <code>type</code>, the notification banner sets <code>role</code> to <code>"region"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">role</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Overrides the value of the <code>role</code> attribute for the notification banner. Defaults to <code>"region"</code>. If you set <code>type</code> to <code>"success"</code>, <code>role</code> defaults to <code>"alert"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title<wbr>Id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The <code>id</code> for the banner title, and the <code>aria-labelledby</code> attribute in the banner. Defaults to <code>"govuk-notification-banner-title"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">disable<wbr>Auto<wbr>Focus</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> If you set <code>type</code> to <code>"success"</code>, or <code>role</code> to <code>"alert"</code>, JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set <code>disableAutoFocus</code> to <code>true</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The classes that you want to add to the notification banner. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> The HTML attributes that you want to add to the notification banner, for example, data attributes. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/notification-banner/macro.njk"</span> <span class="hljs-keyword">import</span> govukNotificationBanner %} {% set html %} <p <span class="hljs-keyword">class</span>=<span class="hljs-string">"govuk-notification-banner__heading"</span>> <span class="hljs-title class_">You</span> have <span class="hljs-number">7</span> days left to send your application. <a <span class="hljs-keyword">class</span>=<span class="hljs-string">"govuk-notification-banner__link"</span> href=<span class="hljs-string">"#"</span>><span class="hljs-title class_">View</span> application</a>. </p> {% endset %} {{ <span class="hljs-title function_">govukNotificationBanner</span>({ <span class="hljs-attr">html</span>: html }) }}</code></pre> </div> </div> </div> <h2 id="when-to-use-this-component">When to use this component</h2> <p>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. For example:</p> <ul> <li>telling the user about a problem that’s affecting the service as a whole (for example, delays in processing applications because of an emergency)</li> <li>telling the user about something that affects them in particular (for example, an approaching deadline they need to meet)</li> <li>telling the user about the outcome of something they’ve just done on a previous page (for example, confirming that an email has been sent)</li> </ul> <h2 id="when-not-to-use-this-component">When not to use this component</h2> <p>Use notification banners sparingly. There’s <a href="https://www.nngroup.com/articles/banner-blindness-old-and-new-findings/">evidence that people often miss them</a>, and using them too often is likely to make this problem worse.</p> <p>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. Use an <a href="/components/inset-text/">Inset text component</a> or <a href="/components/warning-text/">Warning text component</a> if it needs to stand out.</p> <p>Do not:</p> <ul> <li>use a notification banner to tell the user about validation errors - use an <a href="/components/error-message/">Error message component</a> and <a href="/components/error-summary/">Error summary component</a> instead</li> <li>show a notification banner and an <a href="/components/error-summary/">Error summary component</a> on the same page - just show the error summary</li> </ul> <h2 id="how-it-works">How it works</h2> <p>Position a notification banner immediately before the page <code>h1</code>. 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. <a href="https://design-system.service.gov.uk/styles/layout/">Read about how to lay out pages</a>.</p> <p>Use <code>role="region"</code> and <code>aria-labelledby="govuk-notification-banner-title"</code> (with <code>id="govuk-notification-banner-title"</code> on <code><govuk-notification-banner__title></code>) so that screen reader users can navigate to the notification banner.</p> <p>Avoid showing more than one notification banner on the same page. Instead, combine the messages in a single notification banner. If the messages are too different to combine, only show the highest priority notification banner.</p> <h3 id="notification-banner-headings">Notification banner headings</h3> <p>You can use <code><h3></code> headings in the <code>govuk-notification-banner__content</code> to help structure your content.</p> <p>Avoid using headings for single-line notifications that do not need them.</p> <h2 id="telling-the-user-about-a-problem-that-affects-the-whole-service">Telling the user about a problem that affects the whole service</h2> <p>Use a ‘neutral’ blue notification banner if the user needs to know about a problem with the service as a whole.</p> <p>For example:</p> <ul> <li>in a service that lets the user register or apply for something, they might need to know that it’s taking longer than usual to process applications because of an emergency</li> <li>in an account-type service, the user might need to know that the service will be down for scheduled maintenance</li> </ul> <div class="app-example-wrapper" id="whole-service-notification-banner-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/notification-banner/whole-service/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: whole service – notification banner</span> </a> </div> <iframe title="Whole service – Notification banner example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/notification-banner/whole-service/index.html" loading="lazy"></iframe> </div> <span id="options-whole-service-notification-banner-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#whole-service-notification-banner-example-html" role="tab" aria-controls="whole-service-notification-banner-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#whole-service-notification-banner-example-nunjucks" role="tab" aria-controls="whole-service-notification-banner-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#whole-service-notification-banner-example-html" aria-controls="whole-service-notification-banner-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="whole-service-notification-banner-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"region"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"govuk-notification-banner-title"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-notification-banner"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner__header"</span>></span> <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner__title"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"govuk-notification-banner-title"</span>></span> Important <span class="hljs-tag"></<span class="hljs-name">h2</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner__content"</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner__heading"</span>></span> There may be a delay in processing your application because of the coronavirus outbreak. <span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#whole-service-notification-banner-example-nunjucks" aria-controls="whole-service-notification-banner-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="whole-service-notification-banner-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-whole-service-notification-banner-example-details"> <summary class="govuk-details__summary"> <span class="govuk-details__summary-text"> <span data-components="github-component-arguments">Nunjucks macro options</span> </span> </summary> <div class="govuk-details__text"> <p> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. </p> <p> Some options are required for the macro to work; these are marked as “Required” in the option description. </p> <p> If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. </p> <table class="govuk-table app-options__table" id="options-whole-service-notification-banner-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> The text that displays in the notification banner. You can use any string with this option. If you set <code>html</code>, this option is not required and is ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> The HTML to use within the notification banner. You can use any string with this option. If you set <code>html</code>, <code>text</code> is not required and is ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">caller</th> <td class="govuk-table__cell">nunjucks-block</td> <td class="govuk-table__cell"> Not strictly a parameter but <a href="https://mozilla.github.io/nunjucks/templating.html#call">Nunjucks code convention</a>. Using a <code>call</code> 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 <code>call</code> block. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title<wbr>Text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> 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:<ul> <li>if you do not set <code>type</code>, <code>titleText</code> defaults to <code>"Important"</code></li> <li>if you set <code>type</code> to <code>success</code>, <code>titleText</code> defaults to <code>"Success"</code></li> <li>if you set <code>titleHtml</code>, this option is ignored</li> </ul> </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title<wbr>Html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> 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 <code>titleHtml</code>, the <code>titleText</code> option is ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title<wbr>Heading<wbr>Level</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Sets heading level for the title only. You can only use values between <code>1</code> and <code>6</code> with this option. The default is <code>2</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The type of notification to render. You can use only <code>"success"</code> or <code>null</code> values with this option. If you set <code>type</code> to <code>"success"</code>, the notification banner sets <code>role</code> to <code>"alert"</code>. JavaScript then moves the keyboard focus to the notification banner when the page loads. If you do not set <code>type</code>, the notification banner sets <code>role</code> to <code>"region"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">role</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Overrides the value of the <code>role</code> attribute for the notification banner. Defaults to <code>"region"</code>. If you set <code>type</code> to <code>"success"</code>, <code>role</code> defaults to <code>"alert"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title<wbr>Id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The <code>id</code> for the banner title, and the <code>aria-labelledby</code> attribute in the banner. Defaults to <code>"govuk-notification-banner-title"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">disable<wbr>Auto<wbr>Focus</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> If you set <code>type</code> to <code>"success"</code>, or <code>role</code> to <code>"alert"</code>, JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set <code>disableAutoFocus</code> to <code>true</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The classes that you want to add to the notification banner. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> The HTML attributes that you want to add to the notification banner, for example, data attributes. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/notification-banner/macro.njk"</span> <span class="hljs-keyword">import</span> govukNotificationBanner %} {{ <span class="hljs-title function_">govukNotificationBanner</span>({ <span class="hljs-attr">text</span>: <span class="hljs-string">"There may be a delay in processing your application because of the coronavirus outbreak."</span> }) }}</code></pre> </div> </div> </div> <p>If your service is on GOV.UK and it’s affected by an emergency, ask your department’s content team to <a href="https://www.gov.uk/guidance/contact-the-government-digital-service/request-a-thing#change-govuk-content">request a change to the service start page</a>.<br>If your service is getting more demand than usual, check that you’ve set up <a href="/patterns/problem-with-the-service-pages/">There is a problem with the service pages</a> and <a href="/patterns/service-unavailable-pages/">Service unavailable pages</a>, and the wording is up to date.</p> <h2 id="telling-the-user-about-something-thats-happening-elsewhere">Telling the user about something that’s happening elsewhere</h2> <p>Use a ‘neutral’ notification banner if the user needs to know about something that’s happening elsewhere in the service. For example:</p> <ul> <li>in a case working system, the user might need to know that there are new cases waiting for their attention</li> <li>in an account-type service, you might need to tell the user that there’s a deadline approaching or that a payment is overdue</li> </ul> <div class="app-example-wrapper" id="notification-banner-second-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/notification-banner/default/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: notification banner second</span> </a> </div> <iframe title="Notification banner second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/notification-banner/default/index.html" loading="lazy"></iframe> </div> <span id="options-notification-banner-second-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#notification-banner-second-example-html" role="tab" aria-controls="notification-banner-second-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#notification-banner-second-example-nunjucks" role="tab" aria-controls="notification-banner-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#notification-banner-second-example-html" aria-controls="notification-banner-second-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="notification-banner-second-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"region"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"govuk-notification-banner-title"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-notification-banner"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner__header"</span>></span> <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner__title"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"govuk-notification-banner-title"</span>></span> Important <span class="hljs-tag"></<span class="hljs-name">h2</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner__content"</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner__heading"</span>></span> You have 7 days left to send your application. <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>View application<span class="hljs-tag"></<span class="hljs-name">a</span>></span>. <span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#notification-banner-second-example-nunjucks" aria-controls="notification-banner-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="notification-banner-second-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-notification-banner-second-example-details"> <summary class="govuk-details__summary"> <span class="govuk-details__summary-text"> <span data-components="github-component-arguments">Nunjucks macro options</span> </span> </summary> <div class="govuk-details__text"> <p> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. </p> <p> Some options are required for the macro to work; these are marked as “Required” in the option description. </p> <p> If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. </p> <table class="govuk-table app-options__table" id="options-notification-banner-second-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> The text that displays in the notification banner. You can use any string with this option. If you set <code>html</code>, this option is not required and is ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> The HTML to use within the notification banner. You can use any string with this option. If you set <code>html</code>, <code>text</code> is not required and is ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">caller</th> <td class="govuk-table__cell">nunjucks-block</td> <td class="govuk-table__cell"> Not strictly a parameter but <a href="https://mozilla.github.io/nunjucks/templating.html#call">Nunjucks code convention</a>. Using a <code>call</code> 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 <code>call</code> block. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title<wbr>Text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> 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:<ul> <li>if you do not set <code>type</code>, <code>titleText</code> defaults to <code>"Important"</code></li> <li>if you set <code>type</code> to <code>success</code>, <code>titleText</code> defaults to <code>"Success"</code></li> <li>if you set <code>titleHtml</code>, this option is ignored</li> </ul> </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title<wbr>Html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> 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 <code>titleHtml</code>, the <code>titleText</code> option is ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title<wbr>Heading<wbr>Level</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Sets heading level for the title only. You can only use values between <code>1</code> and <code>6</code> with this option. The default is <code>2</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The type of notification to render. You can use only <code>"success"</code> or <code>null</code> values with this option. If you set <code>type</code> to <code>"success"</code>, the notification banner sets <code>role</code> to <code>"alert"</code>. JavaScript then moves the keyboard focus to the notification banner when the page loads. If you do not set <code>type</code>, the notification banner sets <code>role</code> to <code>"region"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">role</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Overrides the value of the <code>role</code> attribute for the notification banner. Defaults to <code>"region"</code>. If you set <code>type</code> to <code>"success"</code>, <code>role</code> defaults to <code>"alert"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title<wbr>Id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The <code>id</code> for the banner title, and the <code>aria-labelledby</code> attribute in the banner. Defaults to <code>"govuk-notification-banner-title"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">disable<wbr>Auto<wbr>Focus</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> If you set <code>type</code> to <code>"success"</code>, or <code>role</code> to <code>"alert"</code>, JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set <code>disableAutoFocus</code> to <code>true</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The classes that you want to add to the notification banner. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> The HTML attributes that you want to add to the notification banner, for example, data attributes. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/notification-banner/macro.njk"</span> <span class="hljs-keyword">import</span> govukNotificationBanner %} {% set html %} <p <span class="hljs-keyword">class</span>=<span class="hljs-string">"govuk-notification-banner__heading"</span>> <span class="hljs-title class_">You</span> have <span class="hljs-number">7</span> days left to send your application. <a <span class="hljs-keyword">class</span>=<span class="hljs-string">"govuk-notification-banner__link"</span> href=<span class="hljs-string">"#"</span>><span class="hljs-title class_">View</span> application</a>. </p> {% endset %} {{ <span class="hljs-title function_">govukNotificationBanner</span>({ <span class="hljs-attr">html</span>: html }) }}</code></pre> </div> </div> </div> <h2 id="reacting-to-something-the-user-has-done">Reacting to something the user has done</h2> <p>You can also use a notification banner to tell the user about the outcome of something they’ve just done - but they have not finished the current journey, so it does not make sense to use a <a href="/patterns/confirmation-pages/">Confirmation page at this point in your service</a>.</p> <p>Using a notification banner is unlikely to be the right approach in a linear service - for example, a service that lets the user register or apply for a thing. For a linear service, it will usually make sense to stick to the <a href="https://www.gov.uk/service-manual/design/form-structure">‘one thing per page’ approach</a>, and avoid using a notification banner.</p> <p>Use a <a href="/patterns/confirmation-pages/">Confirmation page in a linear service</a> to tell users that they’ve finished using the service instead of a notification banner.</p> <p>Use the green version of the notification banner to confirm that something they’re expecting to happen has happened.</p> <div class="app-example-wrapper" id="success-banner-notification-banner-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/notification-banner/success/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: success banner – notification banner</span> </a> </div> <iframe title="Success banner – Notification banner example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/notification-banner/success/index.html" loading="lazy"></iframe> </div> <span id="options-success-banner-notification-banner-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#success-banner-notification-banner-example-html" role="tab" aria-controls="success-banner-notification-banner-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#success-banner-notification-banner-example-nunjucks" role="tab" aria-controls="success-banner-notification-banner-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#success-banner-notification-banner-example-html" aria-controls="success-banner-notification-banner-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="success-banner-notification-banner-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner govuk-notification-banner--success"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"alert"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"govuk-notification-banner-title"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-notification-banner"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner__header"</span>></span> <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner__title"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"govuk-notification-banner-title"</span>></span> Success <span class="hljs-tag"></<span class="hljs-name">h2</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner__content"</span>></span> <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner__heading"</span>></span> Training outcome recorded and trainee withdrawn <span class="hljs-tag"></<span class="hljs-name">h3</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>Contact <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>example@department.gov.uk<span class="hljs-tag"></<span class="hljs-name">a</span>></span> if you think there’s a problem.<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#success-banner-notification-banner-example-nunjucks" aria-controls="success-banner-notification-banner-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="success-banner-notification-banner-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-success-banner-notification-banner-example-details"> <summary class="govuk-details__summary"> <span class="govuk-details__summary-text"> <span data-components="github-component-arguments">Nunjucks macro options</span> </span> </summary> <div class="govuk-details__text"> <p> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. </p> <p> Some options are required for the macro to work; these are marked as “Required” in the option description. </p> <p> If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. </p> <table class="govuk-table app-options__table" id="options-success-banner-notification-banner-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> The text that displays in the notification banner. You can use any string with this option. If you set <code>html</code>, this option is not required and is ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> The HTML to use within the notification banner. You can use any string with this option. If you set <code>html</code>, <code>text</code> is not required and is ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">caller</th> <td class="govuk-table__cell">nunjucks-block</td> <td class="govuk-table__cell"> Not strictly a parameter but <a href="https://mozilla.github.io/nunjucks/templating.html#call">Nunjucks code convention</a>. Using a <code>call</code> 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 <code>call</code> block. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title<wbr>Text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> 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:<ul> <li>if you do not set <code>type</code>, <code>titleText</code> defaults to <code>"Important"</code></li> <li>if you set <code>type</code> to <code>success</code>, <code>titleText</code> defaults to <code>"Success"</code></li> <li>if you set <code>titleHtml</code>, this option is ignored</li> </ul> </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title<wbr>Html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> 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 <code>titleHtml</code>, the <code>titleText</code> option is ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title<wbr>Heading<wbr>Level</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Sets heading level for the title only. You can only use values between <code>1</code> and <code>6</code> with this option. The default is <code>2</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The type of notification to render. You can use only <code>"success"</code> or <code>null</code> values with this option. If you set <code>type</code> to <code>"success"</code>, the notification banner sets <code>role</code> to <code>"alert"</code>. JavaScript then moves the keyboard focus to the notification banner when the page loads. If you do not set <code>type</code>, the notification banner sets <code>role</code> to <code>"region"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">role</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Overrides the value of the <code>role</code> attribute for the notification banner. Defaults to <code>"region"</code>. If you set <code>type</code> to <code>"success"</code>, <code>role</code> defaults to <code>"alert"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title<wbr>Id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The <code>id</code> for the banner title, and the <code>aria-labelledby</code> attribute in the banner. Defaults to <code>"govuk-notification-banner-title"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">disable<wbr>Auto<wbr>Focus</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> If you set <code>type</code> to <code>"success"</code>, or <code>role</code> to <code>"alert"</code>, JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set <code>disableAutoFocus</code> to <code>true</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The classes that you want to add to the notification banner. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> The HTML attributes that you want to add to the notification banner, for example, data attributes. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/notification-banner/macro.njk"</span> <span class="hljs-keyword">import</span> govukNotificationBanner %} {% set html %} <h3 <span class="hljs-keyword">class</span>=<span class="hljs-string">"govuk-notification-banner__heading"</span>> <span class="hljs-title class_">Training</span> outcome recorded and trainee withdrawn </h3> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>Contact <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-notification-banner__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>example@department.gov.uk<span class="hljs-tag"></<span class="hljs-name">a</span>></span> if you think there’s a problem.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span> {% endset %} {{ <span class="hljs-title function_">govukNotificationBanner</span>({ <span class="hljs-attr">html</span>: html, <span class="hljs-attr">type</span>: <span class="hljs-string">"success"</span> }) }}</code></pre> </div> </div> </div> <p>Since you’re using the notification banner to tell the user about the outcome of something they’ve just done, add <code>role="alert"</code> so focus shifts to the notification banner on page load.</p> <p>Remove a green notification banner when the user moves to a new page.</p> <p>To make the green version of the notification banner accessible:</p> <ul> <li>use headings like ‘Success’ - so that you’re not relying on colour alone to convey meaning – to <a href="https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html">meet WCAG 2.2 success criterion 1.4.1 Use of colour</a></li> <li>use the same heading for green notification banners within the same service - so that you’re identifying components that work in the same way consistently – this is to <a href="https://www.w3.org/WAI/WCAG22/Understanding/consistent-identification">meet WCAG 2.2 success criterion 3.2.4 Consistent identification</a></li> </ul> <h2 id="research-on-this-component">Research on this component</h2> <p>We need more research to understand:</p> <ul> <li>how common it is for users to miss important information in notification banners (including users of assistive technology, who might skip straight to the <code>h1</code>)</li> <li>whether it’s sometimes helpful to allow users to dismiss notifications, and how to do this</li> </ul> </div> <h2 class="govuk-heading-l govuk-!-padding-top-7" id="help-improve-this-page">Help improve this component</h2> <p class="govuk-body"> To help make sure that this page is useful, relevant and up to date, you can: </p> <ul class="govuk-list govuk-list--bullet"> <li> take part in the <a class="govuk-link app-contact-panel__link" href="https://github.com/alphagov/govuk-design-system-backlog/issues/2"> ‘Notification banner’ discussion on GitHub </a> and share your research </li> <li> <a class="govuk-link app-contact-panel__link" href="https://github.com/alphagov/govuk-design-system/edit/main/src/components/notification-banner/index.md">propose a change on GitHub</a> – read more about <a class="govuk-link app-contact-panel__link" href="/community/propose-a-content-change-using-github/"> how to propose changes in GitHub </a> </li> </ul> <h3 class="govuk-heading-m govuk-!-padding-top-7" id="tell-us-if-your-service-uses"> Tell us if your service uses this component </h3> <p class="govuk-body"> <a class="govuk-link app-contact-panel__link" target="_blank" href="https://surveys.publishing.service.gov.uk/s/MPR0MV/">Take part in our usage survey (opens in a new tab)</a> to help us improve this component to better meet the needs of the services that use it. </p> <div class="app-contact-panel"> <h2 class="app-contact-panel__heading">Need help?</h2> <p class="govuk-body app-contact-panel__body"> If you’ve got a question about the GOV.UK Design System, <a class="govuk-link" href="/get-in-touch/">contact the team</a>. </p> </div> </main> </div> <div class="app-back-to-top app-back-to-top--hidden" data-module="app-back-to-top"> <a class="govuk-link govuk-link--no-visited-state app-back-to-top__link" href="#top"> <svg role="presentation" focusable="false" class="app-back-to-top__icon" xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17"> <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"></path> </svg>Back to top </a> </div> </div> <footer class="govuk-footer app-footer"> <div class="govuk-width-container app-width-container"> <div class="govuk-footer__meta"> <div class="govuk-footer__meta-item govuk-footer__meta-item--grow"> <h2 class="govuk-visually-hidden">Support links</h2> <ul class="govuk-footer__inline-list"> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/accessibility-statement/"> Accessibility statement </a> </li> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/sitemap/"> Sitemap </a> </li> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/cookies/"> Cookies </a> </li> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/privacy-policy/"> Privacy </a> </li> </ul> <div class="govuk-footer__meta-custom"> Built by the <a href="/design-system-team/" class="govuk-footer__link">GOV.UK Design System team</a> </div> <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41" > <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" /> </svg> <span class="govuk-footer__licence-description"> All content is available under the <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license" >Open Government Licence v3.0</a>, except where otherwise stated </span> </div> <div class="govuk-footer__meta-item"> <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/" > © Crown copyright </a> </div> </div> </div> </footer> <script type="module" src="/javascripts/application-37197e2145908947d5d2aea30eacf237.js"></script> </body> </html>

CINXE.COM

Notification banner – GOV.UK Design System