Notification banner

A banner highlighting key content that all visitors to a website will need to see.

Open this example in a new window

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">
            <div role="heading" class="visually-hidden">Information</div>

            <div class="ds_notification__text">
                <p>We need to tell you about <a data-banner="banner-BANNERNAME-link" href="#">something</a></p>
            </div>

            <button data-banner="banner-BANNERNAME-close" class="ds_notification__close  js-close-notification" type="button">
                <span class="visually-hidden">Close this notification</span>
                <svg class="ds_icon" aria-hidden="true" role="img"><use xlink:href="/assets/images/icons/icons.stack.svg#close-21"></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.

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, for example data-banner="banner-BANNERNAME-link" or the close button, for example data-banner="banner-BANNERNAME-close".

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top