Notification banner
Sample 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.
Links to further content can be included in the banner.
You should try to avoid having more than 2 notification banners on a page. If you have more than 1 banner, each banner should be distinct.
Each banner should also allow the user to remove the banner from the page, usually by having a ‘close’ link or an ‘X’. If the user closes a banner, a cookie should be set logging that the banner shouldn’t appear again in the browser. Because of this, each banner will need a unique ID.
Generally, banners do not contain images, but may contain small icons, such as an arrow to highlight a link.
Other versions of this component
Notification banners can have an icon before their content.
Sample 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>
<span class="ds_notification__icon ds_notification__icon--inverse ds_notification__icon--colour" aria-hidden="true">
<svg class="ds_icon ds_icon--fill" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#priority_high"></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>
Icon display style
Use the following modifier classes to alter the display of the icons in notification banners:
ds_notification__icon--inverse
places the icon on a circle with a solid background
ds_notification__icon--colour
makes the icon use a colour other than the current text colour. The default is yellow.
Both modifiers can be used together, which gives you a coloured disc for an inverted icon.
Icon colour
Icons using the ds_notification__icon--colour
modifier use a colour defined in a $notification-banner__colour-icon-colour
variable. You can override this.
Your value for this should be included before you include the SCSS file.
$notification-banner__colour-icon-colour: red;
@import '/path/to/components/notification-banner/notification-banner';
Why we use this component
To highlight short, key content at the top of the page that all users need to see.
Evidence
User research findings from GOV.UK and NHS suggests that banners which overlay or hide content on a page leads to a worse user experience (higher exit rate).
Website analytics
To understand user behaviour, clicks on banner links items can be tracked through the original page path, the click URL, the click text, and a data attribute showing the link click.
The data attribute is added automatically by the Design System’s ‘tracking’ script.
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback