Stacks

Accessibility

Item	Applied to	Description
`aria-describedby="[id]"`	`role="alertdialog"`	Used to reference the alert message within the dialog. If you are using `role="alertdialog"`, this must be applied. (Source)
`aria-hidden="[state]"`	`.s-notice`	Informs assistive technologies (such as screen readers) if they should ignore the element. This should not be confused with the HTML5 hidden attribute which tells the browser to not display an element. (Source)
`aria-label="[id]"`	`Message` `area`	Labels the element for assistive technologies (such as screen readers). (Source)
`role="status"`	`.s-notice--banner`	Defines a live region with advisory information for the user, but not important enough to warrant an alert. (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"`	`Notice` `dialog` `container`	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" aria-hidden="false">…</aside>
<aside class="s-notice s-notice__success" role="status" aria-hidden="false">…</aside>
<aside class="s-notice s-notice__warning" role="status" aria-hidden="false">…</aside>
<aside class="s-notice s-notice__danger" role="status" aria-hidden="false">…</aside>

Filled important

Used sparingly for when an important notice needs to be noticed

<aside class="s-notice s-notice__invert s-notice__important" role="alert" aria-hidden="false">
    <div class="grid" role="alertdialog" aria-describedby="notice-message">
        <div class="grid--cell" aria-label="notice-message">
            <p class="m0">…</p>
        </div>
        <div class="grid--cell ml-auto" aria-label="notice-dismiss">
            <a href="#" class="fc-white o75 js-notice-close">
                @Svg.ClearSm
            </a>
        </div>
    </div>
</aside>
<aside class="s-notice s-notice__info s-notice__important" role="alert" aria-hidden="false">…</aside>
<aside class="s-notice s-notice__success s-notice__important" role="alert" aria-hidden="false">… <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" aria-hidden="false">…</aside>
<aside class="s-notice s-notice__danger s-notice__important" role="alert" aria-hidden="false">…</aside>

Behaviors

Behavior	Class	Applied to	Description
Inline	`.s-notice`	N/A	Notice inserted within the content area.
Toast	`.s-notice-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" aria-hidden="false">…</aside>

With an Icon

Notices are often accompanied by an icon.

<aside class="grid s-notice s-notice__info" aria-hidden="false" 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. When including buttons, you can apply .s-notice--btn to buttons to apply a toast-specific color.

<aside class="grid--cell s-notice s-notice__info p8 pl16 bs-sm" role="status">
    <div class="grid gsx gs16 ai-center jc-space-between" aria-describedby="notice-message">
        <div class="grid--cell" aria-label="notice-message">
            Toast notice message
        </div>
        <div class="grid">
            <a href="#" class="s-btn s-notice--btn">
                Undo
            </a>
            <a href="#" class="s-btn s-notice--btn">
                @Svg.ClearSm
            </a>
        </div>
    </div>
</aside>

Toast notice message with an undo button

Undo

Toast notice message with an undo button

Undo

Toast notice message with an undo button

Undo

Toast notice message with an undo button

Undo