Notices

Notices deliver System and Engagement messaging, informing the user about product or account statuses and related actions.

Accessibility

Item Applied to Description
aria-labelledby="[id]" .s-toast Used to reference the alert message within the dialog. If you are using .s-toast, this must be applied. (Source)
aria-hidden="[state]" .s-toast Informs assistive technologies (such as screen readers) if they should ignore the element. When applied to .s-toast, Stacks will use this attribute to show or hide the toast. (Source)
aria-label="[text]" .s-btn Labels the element for assistive technologies (such as screen readers). This should be used on any button that does not contain text content. (Source)
role="alert" .s-notice A form of live region which contains important, usually time-sensitive, information. Elements with an alert role have an implicit aria-live value of assertive and implicit aria-atomic value of true. (Source)
role="alertdialog" .s-toast The wrapping content area of an alert. Elements with the alertdialog role must use the aria-describedby attribute to reference the alert message within the dialog. (Source)
role="status" .s-notice A form of live region which contains advisory information but isn't important enough to justify an alert role. Elements with a status role have an implicit aria-live value of polite and implicit aria-atomic value of true. If the element controlling the status appears in a different area of the page, you must make the relationship explicit with the aria-controls attribute. (Source)

Visual styles

Classes

Class Applied to Description
.s-notice N/A Default style used to separate notices from the main content.
.s-notice--btn N/A Child element applied to .s-btn within a toast to give it a subtle tint that’s appropriate in that context.
.s-notice__info .s-notice Visual style for information notices.
.s-notice__success .s-notice Visual style for success notices.
.s-notice__warning .s-notice Visual style for warning notices.
.s-notice__danger .s-notice Visual style for danger notices.
.s-notice__important .s-notice 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.

Filled

Default style used to separate notices from the main content

<aside class="s-notice s-notice__info" role="status"></aside>
<aside class="s-notice s-notice__success" role="status"></aside>
<aside class="s-notice s-notice__warning" role="status"></aside>
<aside class="s-notice s-notice__danger" role="status"></aside>

Filled important

Used sparingly for when an important notice needs to be noticed

<aside class="s-notice s-notice__info s-notice__important" role="alert"></aside>
<aside class="s-notice s-notice__success s-notice__important" role="alert"><a class="s-link s-link__inherit s-link__underlined" href="…"></a></aside>
<aside class="s-notice s-notice__warning s-notice__important" role="alert"></aside>
<aside class="s-notice s-notice__danger s-notice__important" role="alert"></aside>

Behaviors

Behavior Class Applied to Description
Inline .s-notice N/A Notice inserted within the content area.
Toast .s-toast Container Adds a container to properly fix a floating toast notice to the top-center of the page. These toasts typically disappear after a set time (i.e. 3 seconds)

Inline

Default behavior for notices that are inserted within the content area

<aside class="s-notice s-notice__info" role="status"></aside>

With an Icon

Notices are often accompanied by an icon.

<aside class="grid s-notice s-notice__info" role="status">
<div class="grid--cell mr8">
@Svg.Alert
</div>
<div class="grid--cell lh-lg">

</div>
</aside>

Toast

Floating notices, but aligned to the top and center of the page and they disappear after a set time. Visibility is changed with animation by toggling between aria-hidden="true" and aria-hidden="false". When including buttons, you can apply .s-notice--btn to buttons to apply a toast-specific color.

<div class="s-toast" aria-hidden="true" role="alertdialog" aria-labelledby="notice-message">
<aside class="s-notice s-notice__success p8 pl16">
<div class="grid gs16 gsx ai-center jc-space-between">
<div class="grid--cell" id="notice-message">
Toast notice message with an undo button
</div>
<div class="grid">
<button type="button" class="s-btn s-notice--btn">
Undo
</button>
<button type="button" class="s-btn s-notice--btn" aria-label="Dismiss">
@Svg.ClearSm
</button>
</div>
</div>
</aside>
</div>
Toast notice message with an undo button
Toast notice message with an undo button
Toast notice message with an undo button
Toast notice message with an undo button