Banners
Banners are a type of notice, delivering both system and engagement messaging. These are highly intrusive messaging methods and so should be used appropriately.
System banners are used for system messaging. They are full-width notices placed in one of two locations:
- Above everything else: If the system banner is related to the entire website (e.g. the website is in read-only), place the banner first. These cannot be dismissed until the issue is resolved. To pin a system banner to the top of the browser window, add
.is-pinned. - Below the top navigation bar: This is the default location for all system banners. Use these banners when it affects only a particular area of the product (e.g. when a product subscription is about to expire).
Since system banners are a type of notice, you can use the following notice visual styles in conjunction with .s-banner:
| Class | Applies to | Description |
|---|---|---|
.s-banner |
N/A | Base banner parent class. This defaults to a system banner style. |
.s-banner__info |
.s-banner |
Applies info (blue) visual styles. |
.s-banner__success |
.s-banner |
Applies success (green) visual styles. |
.s-banner__warning |
.s-banner |
Applies warning (yellow) visual styles. |
.s-banner__danger |
.s-banner |
Applies danger (red) visual styles. |
.s-banner__important |
.s-banner |
Emboldens the above visual styles by strengthening the background saturation. This should be used for time-sensitive, pressing information that needs to be noticed by the user. |
<aside class="s-banner s-banner__info s-banner__important" role="alert" aria-hidden="false">…</aside>
<aside class="s-banner s-banner__success s-banner__important" role="alert" aria-hidden="false">…</aside>
<aside class="s-banner s-banner__warning s-banner__important" role="alert" aria-hidden="false">…</aside>
<aside class="s-banner s-banner__danger s-banner__important" role="alert" aria-hidden="false">…</aside>
<aside class="s-banner s-banner__important" role="alert" aria-hidden="false">…</aside>