Notice

View Storybook

A notice is an informational and assistive message that appears inline with content.

Overview

A notice delivers informational and assistive messages that inform the user about product or account statuses and related actions. It can suggest an action or dismissed by the user, though neither are required. For time-based notifications, see toasts.

Classes

Class Applies to Description
.d-notice N/A Base parent notice class. This defaults to the system notice style.
.d-notice--error .d-notice Applies error visual style.
.d-notice--info .d-notice Applies info visual style.
.d-notice--success .d-notice Applies success visual style.
.d-notice--warning .d-notice Applies warning visual style.
.d-notice--important .d-notice Adds the higher importance style by emboldening the background color. These should only be used for pressing information that needs to be noticed by the user.
.d-notice__icon N/A Contains the notice icon.
.d-notice__content N/A Contains the notice content.
.d-notice__title N/A Contains the notice title.
.d-notice__message N/A Contains the notice message.
.d-notice__actions N/A Contains the notice actions.

Examples

Base Styles

Used in most scenarios when the message should be noticeable but not dominate.

Important

Used occasionally in scenarios when the message needs to dominate.

Accessibility

Item Applies to Description
role="status" .d-notice Defines a live region with advisory information for the user, but not important enough to warrant an alert (Source)
role="alert" .d-notice--important 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)
aria-hidden="[true | false]" .d-notice Informs assistive technologies, such as screen readers, if they should ignore the element. This should not be confused with the HTML hidden attribute which tells the browser to not display an element. (Source)
aria-labelledby="[id]" .d-notice Only used if a title is present, it provides assistive technologies with a title for the dialog. (Source)
aria-label="[title]" .d-notice If aria-labelledby is not used (because no title is present) and role="alert" is in use, this must be used to provides assistive technologies with a title for the dialog. (Source)
aria-describedby="[id]" .d-notice Provides assistive technologies with the alert's descriptive copy (Source)