Banners

Figma

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

Section titled Classes

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

Usage guidelines

Section titled Usage guidelines

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

Pinned: If the system banner is related to the entire website (e.g. the website is in read-only), above all other content including the topbar. 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).

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

Examples

Section titled Examples

Style

Important?

Pinned?

Base

Section titled 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

Section titled 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

Section titled 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

Section titled 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

Section titled 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

Section titled 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

Section titled 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 Example

Section titled JavaScript 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"));
});

JavaScript

Section titled 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.

Attributes

Section titled Attributes

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

Events

Section titled Events

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

event.detail	Applicable events	Description
`dispatcher`	`s-banner:*`	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.

Helpers

Section titled Helpers

Function	Parameters	Description
`Stacks.showBanner`	`element`: the element the `data-controller="s-banner"` attribute is on	Helper to manually show an s-banner element via external JS
`Stacks.hideBanner`	`element`: the element the `data-controller="s-banner"` attribute is on	Helper to manually hide an s-banner element via external JS