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 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 xlink: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.

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>

            <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 xlink: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 xlink:href="/assets/images/icons/icons.stack.svg#close"></use></svg>
            </button>
        </div>
    </div>
</div>

Developer notes

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 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