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

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

  1. 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.
  2. 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:

System Examples

1
2
3
4
5
<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>

System Classes

Class Applies to Description
.s-banner N/A Base banner parent class. This defaults to a system banner style.
.s-banner__dark .s-banner Creates a darker background and border color.
.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.

Hero Banners

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

  1. Between the navigation and content areas: While highly disruptive, these place the banner within the users view first (e.g. sign-up or login messaging for logged out or new users).
  2. Fixed to the bottom of the browser window: A more minimal, persistent location for lower priority messages.

Since hero banners have an engagement goal, more visual styling is added to the heros. This means a number of new, specific classes are available for hero banners:

Hero Examples

1
2
3
4
5
6
<aside class="s-hero js-banner-hero" role="region" aria-hidden="false">
    <div class="s-hero--container js-banner-circle" aria-labeledby="banner-title" aria-describedby="banner-message">
        <div class="grid--cell"></div>
        <div class="grid--cell"></div>
    </div>
</aside>

Hero Classes

Class Applies to Description
.s-hero N/A Base parent class for hero banners
.s-hero--bar .s-hero A smaller, visually darker bar, typically located underneath a larger hero. Used primarily for secondary calls-to-action.
.s-hero--container .s-hero .s-hero--bar All hero content is contained within this class to properly center it within the overall hero wrapper.
.s-hero__orange .s-hero .s-hero--bar A visual treatment that matches our orange brand colors.
.s-hero__purple .s-hero .s-hero--bar A visual treatment that matches our purple brand colors.
.s-hero__dark .s-hero .s-hero--bar A visual treatment that matches our black brand colors.
.s-hero__info .s-hero .s-hero--bar A visual treatment that matches info styles.
.s-hero__success .s-hero .s-hero--bar A visual treatment that matches success styles.
.s-hero__warning .s-hero .s-hero--bar A visual treatment that matches warning styles.
.s-hero__danger .s-hero .s-hero--bar A visual treatment that matches danger styles.
.s-hero--circle .s-hero--container Inserts a background circle to the left side of the hero area.

Accessibility

Item Applied to Description
aria-describedby="[id]" .s-hero--container Used to locate what copy should be used to describe the banner. (Source)
aria-labeledby="[id]" .s-hero--container Used to locate what copy should be used to title the banner. (Source)
aria-hidden="[state]" .s-banner .s-hero Used to inform screen-readers if the banner should be visible or not. (Source)
aria-label="[id]" N/A Apply this label to the copy blocks which title or describe the banner. (Source)
role="region" .s-banner .s-hero Defines the banner area as a distinct area on the page. Used only on hero banners. (Source)
role="status" .s-banner .s-hero Defines a live region with advisory information for the user, but not important enough to warrant an alert. (Source)
role="alert" .s-banner .s-hero Defines a live region with important, time-sensitive information for the user. (Source)
role="alertdialog" .s-hero--container Defines the containing dialog area of an alert message. This is to be used in conjunction with role="alert". (Source)