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.

You can include links to further content 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

There are two modifier classes you can use to control the appearance of the icon:

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.

You can use both modifiers together. This would give result in 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.

You should include your value for this 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

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 click URL, the click text, and a data attribute showing the link click.

The Design System’s ‘tracking’ script adds this data attribute.