Figma Edit

Banners

Banners are full-width notices used for system and engagement messaging. They are highly intrusive and should be used only when essential information needs to be conveyed to the user.

Classes

Class	Description	Parent	Modifies
`.s-banner`	Base banner element.	N/A	N/A
`.s-banner--actions`	Container styling for banner actions including the dismiss button.	`.s-banner`	N/A
`.s-banner--dismiss`	Applies to child button element within the banner to position it appropriately.	`.s-banner`	N/A
`.s-banner__important`	Applies an important visual style. This should be used for time-sensitive, pressing information that needs to be noticed by the user.	N/A	`.s-banner`
`.s-banner__info`	Applies info (blue) visual styles.	N/A	`.s-banner`
`.s-banner__success`	Applies success (green) visual styles.	N/A	`.s-banner`
`.s-banner__warning`	Applies warning (yellow) visual styles.	N/A	`.s-banner`
`.s-banner__danger`	Applies danger (red) visual styles.	N/A	`.s-banner`
`.s-banner__featured`	Applies featured (purple) visual styles.	N/A	`.s-banner`
`.s-banner__activity`	Applies activity (pink) visual styles.	N/A	`.s-banner`
`.is-pinned`	Pins the banner to the top of the browser window.	N/A	`.s-banner`

Usage guidelines

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

Pinned to the top of the browser window — Use when the banner relates to the entire website (e.g. the site is in read-only mode). Add .is-pinned to pin the banner above all other content including the topbar.
Below the top navigation bar — The default placement. Use when the banner affects only a particular area of the product (e.g. a subscription is about to expire).

Refer to the Classes section for more information on how to apply the correct styles.

Examples

Style

Important?

Pinned?

Base

<div class="s-banner" role="alert" aria-hidden="false">…</div>
<div class="s-banner s-banner__important" role="alert" aria-hidden="false">…</div>

Info

<div class="s-banner s-banner__info" role="alert" aria-hidden="false">…</div>
<div class="s-banner s-banner__info s-banner__important" role="alert" aria-hidden="false">…</div>

Success

<div class="s-banner s-banner__success" role="alert" aria-hidden="false">…</div>
<div class="s-banner s-banner__success s-banner__important" role="alert" aria-hidden="false">…</div>

Warning

<div class="s-banner s-banner__warning" role="alert" aria-hidden="false">…</div>
<div class="s-banner s-banner__warning s-banner__important" role="alert" aria-hidden="false">…</div>

Danger

<div class="s-banner s-banner__danger" role="alert" aria-hidden="false">…</div>
<div class="s-banner s-banner__danger s-banner__important" role="alert" aria-hidden="false">…</div>

Featured

<div class="s-banner s-banner__featured" role="alert" aria-hidden="false">…</div>
<div class="s-banner s-banner__featured s-banner__important" role="alert" aria-hidden="false">…</div>

Activity

<div class="s-banner s-banner__activity" role="alert" aria-hidden="false">…</div>
<div class="s-banner s-banner__activity s-banner__important" role="alert" aria-hidden="false">…</div>

JavaScript

The .s-banner component includes a controller to show and hide the banner programitically. While it is optional, at least including the functionality to close the banner is recommended.

Example

<div
    role="alert"
    id="example-banner"
    class="s-banner"
    aria-labelledby="example-message"
    aria-hidden="true"
    data-controller="s-banner"
    data-s-banner-target="banner">
    Example banner
</div>
…
<button
    data-toggle="s-banner"
    data-target="#example-banner">
    Show banner
</button>

document.querySelector(".js-banner-toggle").addEventListener("click", function(e) {
    Stacks.showBanner(document.querySelector("#example-banner"));
});

Attributes

Attribute	Description	Applies to
`data-controller="s-banner"`	Wires up the element to the banner controller. This may be a `.s-banner` element or a wrapper element.	Controller element
`data-s-banner-target="banner"`	Wires up the element that is to be shown/hidden.	`.s-banner element`
`data-s-banner-remove-when-hidden="true"`	(optional) Removes the banner from the DOM entirely when it is hidden.	Controller element

Events

Event	Description	Applies to
`s-banner:show`	Fires immediately before showing the banner. Calling `.preventDefault()` cancels the display of the banner.	Banner target
`s-banner:shown`	Fires after the banner has been visually shown.	Banner target
`s-banner:hide`	Fires immediately before hiding the banner. Calling `.preventDefault()` cancels the removal of the banner.	Banner target
`s-banner:hidden`	Fires after the banner has been visually hidden.	Banner target

Event details

event.detail	Description	Applicable events
`dispatcher`	Contains the `Element` that initiated the event. For instance, the button clicked to show, the element clicked outside the banner that caused it to hide, etc.	N/A

Helpers

Function	Description	Applies to
`Stacks.showBanner`	Helper to manually show an s-banner element via external JS.	Controller element
`Stacks.hideBanner`	Helper to manually hide an s-banner element via external JS.	Controller element