Notices

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

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="region" .s-notice--banner Defines the banner area as a distinct area on the page. Used only on hero banners. (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__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__outlined .s-notice Minimal style used for lower priority information that is minimally separated from the main content.
.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

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

Outlined

Minimal style used to minimally separate notices from the main content

1
2
3
4
<aside class="s-notice s-notice__info s-notice__outlined" role="status" aria-hidden="false"></aside>
<aside class="s-notice s-notice__success s-notice__outlined" role="status" aria-hidden="false"></aside>
<aside class="s-notice s-notice__warning s-notice__outlined" role="status" aria-hidden="false"></aside>
<aside class="s-notice s-notice__danger s-notice__outlined" role="status" aria-hidden="false"></aside>

Filled Important

Used sparingly for when an important notice needs to be noticed

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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"></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

1
<aside class="s-notice s-notice__info" role="status" aria-hidden="false"></aside>

Toast

Floating notices, but aligned to the top and center of the page and they disappear after a set time

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<aside class="s-toast">
    <div class="s-notice s-notice__success" role="status" aria-hidden="false">
        <div class="grid gs16 gsx ai-center jc-space-between" aria-describedby="notice-message">
            <div class="grid--cell" aria-label="notice-message">
                Toast notice message
            </div>
            <div class="grid--cell mr0" aria-label="notice-dismiss">
                <a class="p8 s-btn grid grid__center fc-dark">
                    @Svg.ClearSm.With("m0")
                </a>
            </div>
        </div>
    </div>
</aside>

Toast notice message styling

Toast notice message with an undo button