Notification banner
A banner highlighting key content that all visitors to a website will need to see.
HTML
<div class="ds_notification ds_reversed" data-module="ds-notification">
<div class="ds_wrapper">
<div class="ds_notification__content ds_notification__content--has-close">
<h2 class="visually-hidden">Information</h2>
<div class="ds_notification__text">
<p>We need to tell you about <a href="#">something</a></p>
</div>
<button class="ds_notification__close js-close-notification" type="button">
<span class="visually-hidden">Close this notification</span>
<svg class="ds_icon ds_icon--fill" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#close"></use></svg>
</button>
</div>
</div>
</div>About this component
The notification banner stretches across the top of a web page, spanning its full width. It pushes everything else on a web page beneath it.
You can include links to further content in the banner.
Generally, banners do not contain images. However, they may contain small icons, such as an arrow to highlight a link.
When to use this component
Use a notification banner to share important information across all pages or screens.
A notification banner can help users:
- get updates about a system or a service
- receive feedback on their actions
- find out about actions they need to take
How to use this component
You should try to avoid having more than 2 notification banners on a page. If you have more than one banner, each banner should be distinct.
Give users a way to close the banner, such as a ‘close’ link or an ‘X’.
Once a user closes the banner, it should not be shown again in the browser. Use a cookie to remember their choice. Because of this, each banner will need a unique ID.
A notification banner should not stop users accessing information or completing a task. Do not make notification banners ‘sticky’ or fixed.
Place banners consistently so users can find the information in the same location across sites and services.
Use this order at the top of your page:
- Cookie banner
- Notification banner
- Site header
HTML
<div class="ds_page__top">
<div id="cookie-notice" class="ds_notification ds_notification--large ds_notification--cookie js-initial-cookie-content" data-module="ds-cookie-notification">
<div class="ds_wrapper">
<div class="ds_notification__content">
<h2 class="visually-hidden">Information</h2>
<div class="ds_notification__text">
<p>We use <a href="/cookies/">cookies</a> to collect anonymous data to help us improve your site browsing
experience.</p>
<p>Click 'Accept all cookies' to agree to all cookies that collect anonymous data.
To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.</p>
<div class="ds_button-group">
<button type="button" class="ds_button ds_button--small ds_button--secondary js-accept-all-cookies">Accept all cookies</button>
<button type="button" class="ds_button ds_button--small ds_button--secondary js-accept-essential-cookies">Use essential cookies only</button>
<a href="/cookies/">Set cookie preferences</a>
</div>
</div>
</div>
</div>
</div>
<div class="ds_notification ds_reversed" data-module="ds-notification">
<div class="ds_wrapper">
<div class="ds_notification__content ds_notification__content--has-close">
<h2 class="visually-hidden">Information</h2>
<div class="ds_notification__text">
<p>We need to tell you about <a href="#">something</a></p>
</div>
<button class="ds_notification__close js-close-notification" type="button">
<span class="visually-hidden">Close this notification</span>
<svg class="ds_icon ds_icon--fill" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#close"></use></svg>
</button>
</div>
</div>
</div>
<header class="ds_site-header ds_site-header--gradient" role="banner">
<div class="ds_wrapper">
<div class="ds_site-header__content">
<div class="ds_site-branding">
<a class="ds_site-branding__logo ds_site-branding__link" href="/">
<img class="ds_site-branding__logo-image" src="/binaries/content/gallery/designsystem/examples/scottish-government-svg" alt="Scottish Government" />
</a>
<div class="ds_site-branding__title">
Design System
</div>
</div>
<div class="ds_site-header__controls">
<label aria-controls="mobile-navigation" class="ds_site-header__control js-toggle-menu" for="menu">
<span class="ds_site-header__control-text">Menu</span>
<svg class="ds_icon ds_site-header__control-icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#menu"></use></svg>
<svg class="ds_icon ds_site-header__control-icon ds_site-header__control-icon--active-icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#close"></use></svg>
</label>
</div>
<input class="ds_site-navigation__toggle" id="menu" type="checkbox">
<nav id="mobile-navigation" class="ds_site-navigation ds_site-navigation--mobile" data-module="ds-mobile-navigation-menu">
<ul class="ds_site-navigation__list">
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Get started
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Styles
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link ds_current" aria-current="true">
Components
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Patterns
</a>
</li>
</ul>
</nav>
<div class="ds_site-search ds_site-header__search" data-module="ds-site-search">
<form role="search" class="ds_site-search__form">
<label class="ds_label visually-hidden" for="site-search">Search</label>
<div class="ds_input__wrapper ds_input__wrapper--has-icon">
<input name="q" required="" id="site-search" class="ds_input ds_site-search__input" type="text" placeholder="Search this site" autocomplete="off">
<button type="submit" class="ds_button js-site-search-button">
<span class="visually-hidden">Search</span>
<svg class="ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#search"></use></svg>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="ds_site-header__navigation">
<div class="ds_wrapper">
<nav class="ds_site-navigation">
<ul class="ds_site-navigation__list">
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Get started
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Styles
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link ds_current" aria-current="true">
Components
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Patterns
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="ds_phase-banner">
<div class="ds_wrapper">
<p class="ds_phase-banner__content">
<strong class="ds_tag ds_phase-banner__tag">
Alpha
</strong>
<span class="ds_phase-banner__text">
This is a new service. Your <a href="#">feedback</a> will help us to improve it.
</span>
</p>
</div>
</div>
</header>
</div>Other versions of this component
Notification banners can have an icon before their content.
HTML
<div class="ds_notification ds_reversed" data-module="ds-notification">
<div class="ds_wrapper">
<div class="ds_notification__content ds_notification__content--has-close">
<h2 class="visually-hidden">Warning</h2>
<span class="ds_notification__icon" aria-hidden="true">
<svg class="ds_icon ds_icon--fill" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#warning"></use></svg>
</span>
<div class="ds_notification__text">
<p>Something bad has <a href="#">happened</a></p>
</div>
<button class="ds_notification__close js-close-notification" type="button">
<span class="visually-hidden">Close this notification</span>
<svg class="ds_icon ds_icon--fill" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#close"></use></svg>
</button>
</div>
</div>
</div>Why we use this component
To highlight short, key content at the top of the page that all users need to see.
Evidence
We have looked at user research findings from GOV.UK and the NHS. This research suggests that banners which overlay or hide content on a page lead to a higher exit rate.
Website analytics
To understand user behaviour, you can track clicks on banner links items through the:
- original page path
- the selected URL (also known as the 'click URL')
- the selected text (also known as the 'click text')
- a data attribute showing the link click
The Design System’s ‘tracking’ script adds this data attribute.
Tracking attributes
Links in notification banners get a data-banner attribute. Its value uses the pattern banner-[bannername]-link. ‘bannername’ is either the:
- ID of the banner
- one-based index of the banner, if it does not have an ID.
<a href="#" data-banner="banner-covid-link">latest COVID guidance</a>
Close buttons in notification banners get a data-banner attribute. Its value uses the pattern banner-[bannername]-close. ‘bannername’ is either the:
- ID of the banner
- the one-based index of the banner, if it does not have an ID
<button class="ds_notification__close js-close-notification" type="button" data-banner="banner-covid-close">Close this notification</button>