Notification banner

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

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