Banners

Banners are a type of notice, delivering system and engagement messaging. These are highly intrusive notices and should be used sparingly and appropriately.

System banners are used for system messaging. They are full-width notices placed in one of two locations:

  1. Above everything else: If the banner is related to the entire app (e.g. the user lost internet service), place the banner first. These should not be dismissable until the issue is resolved. To pin the banner to the top of the app, add the .d-notice--pinned class.
  2. Below the top bar: This is the default location fo system banners. Use these when it affects only a particular area of the product (e.g. when the user is in Do Not Disturb mode).

Banners are a type of notice and so you can use the following notice styles in conjunction with .d-banner.

Classes

Class Applies to Description
.d-banner N/A Base parent banner class. This defaults to the system banner style.
.d-banner--info .d-banner Applies info (blue) visual style.
.d-banner--warning .d-banner Applies warning (yellow) visual style.
.d-banner--error .d-banner Applies error (red) visual style.
.d-banner--success .d-banner Applies success (green) visual style.
.d-banner--important .d-banner Adds the higher importance style by emboldening the background color. These should only be used for pressing information that needs to be noticed by the user.
.d-banner--pinned .d-banner Pins the banner to the top of the window and pushes all app content down.

Accessibility

Item Applies to Description
role="alert" .d-banner Provides the user with important, and usually time-sensitive information, often telling the user an element has been updated (Source)
role="alertdialog" .d-banner__container Dialog which contains the alert message and where the initial focus goes to in an element within a dialog (Source)
aria-hidden="[true|false]" .d-banner Informs assistive technologies, such as screen readers, if they should ignore the element. This should not be confused with the HTML hidden attribute which tells the browser to not display an element. (Source)
aria-labelledby="[id]" .d-banner__container Only used if a title is present, it provides assistive technologies with a title for the dialog. (Source)
aria-label="[title]" .d-banner__container If aria-labelledby is not used (because no title is present), this must be used to provides assistive technologies with a title for the dialog. (Source)
aria-describedby="[id]" .d-banner__container Provides assistive technologies with the alert's descriptive copy (Source)

Examples

<aside class="d-banner d-banner--info" role="alert" aria-hidden="false">
<div class="d-banner__dialog" role="alertdialog" aria-labelledy="info-alert-title" aria-describedby="info-alert-desc">
<div class="d-notice__icon">
<IconInfo />
</div>
<div class="d-notice__content">
<h1 class="d-notice__title" id="info-alert-title">Optional title</h1>
<p class="d-notice__message" id="info-alert-desc">Message body with <a href="#">a link.</a></p>
</div>
<div class="d-notice__actions">
<button type="button" class="d-btn d-notice__btn">Action</button>
<button type="button" class="d-btn--circle d-notice__btn d-notice__close js-example-notice-close" aria-label="Close">
<span class="d-btn__icon"><IconClose /></span>
<span class="d-btn__label">Close</span>
</button>
</div>
</div>
</aside>
<aside class="d-banner d-banner--success" role="alert" aria-hidden="false"></aside>
<aside class="d-banner d-banner--warning" role="alert" aria-hidden="false"></aside>
<aside class="d-banner d-banner--danger" role="alert" aria-hidden="false"></aside>
Topbar example