12Banners

Banners are set as sticky to displayed on top of the page and in case of dismissable banners on top of the viewport when user scrolls down. There are three available styles:

A success style (green)
A warning style (orange)
A error style (red)

The three styles are added by using BEM modifiers, respectively notification--success, notification--warning, notification--error.

Banners can also hold a notification__status span that wraps the status of the banner in bold.

Banners can be dismissible or non-dismissible. Dismissible banners display a clickable icon--close svg, while non-dismissible banners do not show an icon.

Non-dismissible banners will be stacked below of dismissible banners when user scrolls on top of the page.

Show Markup


<div role="status">
    <div class="notification notification--success js-display-banner-on-load">
        <div class="notification__message">
            <span class="notification__status">Success!</span>
            Your action was very successful.
        </div>
        <a href="" class="notification__dismiss js-dismiss-notification" role="button">
            <svg class="svg-icon svg-icon--white" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--close"></use></svg>
            <span class="show-for-sr">Dismiss</span>
        </a>
    </div>
</div>

<br>
<div role="status">
    <div class="notification notification--warning js-display-banner-on-load">
        <div class="notification__message">
            <span class="notification__status">Warning!</span>
            Something not so great happened.
        </div>
        <a href="" class="notification__dismiss js-dismiss-notification" role="button">
            <svg class="svg-icon svg-icon--white" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--close"></use></svg>
            <span class="show-for-sr">Dismiss</span>
        </a>
    </div>
</div>

<br>
<div role="status">
    <div class="notification notification--warning js-display-banner-on-load">
        <div class="notification__message">
            <span class="notification__status">Warning!</span>
            Something not so great happened.
        </div>
    </div>
</div>

<br>

<div role="status">
    <div class="notification notification--error js-display-banner-on-load">
        <div class="notification__message">
            <span class="notification__status">Error!</span>
            Something bad happened.
        </div>
    </div>
</div>

12.1Accessibility

The dismissable banner is read by screen reader when it appears (role=alert)
The non-dismissable banner is read by screen reader when it appears (role=status)
The dismissable banner does not receive keyboard focus and does not impact the user from completing the form