Notifications

Notifications deliver page-level contextual help to guide the user through a task. Text appears within a color-coded container to give the message visual impact. Add an icon to draw additional focus to the notification. Use these classes only with `<div>` elements. Add a close icon to allow the user to dismiss a page-level notification, unless it's an error message.

Variants

Notifications appear either as soon as the page loads or as triggered by an input field blur state. Depending on use case, a notification will either appear fixed within the page content or be elevated above it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Info

Use this type of notification when providing general info that doesn’t require any action from the user.


<div class="c-notification--info">
  <div class="c-notification__icon">
    <i class="icon icon--info" alt="information notification" title="information notification"></i>
  </div>
  <div class="c-notification__content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>
<div class="c-notification--inline-info">
  <div class="c-notification__icon">
    <i class="icon icon--info" alt="information notification" title="information notification"></i>
  </div>
  <div class="c-notification__content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

Copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Success

Use this type of notification to let the user know that an action they triggered has been completed successfully.


<div class="c-notification--success">
  <div class="c-notification__icon">
    <i class="icon icon--success" alt="success notification" title="success notification"></i>
  </div>
  <div class="c-notification__content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>
<div class="c-notification--inline-success">
  <div class="c-notification__icon">
    <i class="icon icon--success" alt="success notification" title="success notification"></i>
  </div>
  <div class="c-notification__content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

Copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Warning

Use this type of notification to let the user know that additional action is required before they can continue.


<div class="c-notification--warning">
  <div class="c-notification__icon">
    <i class="icon icon--exclamation" alt="warning notification" title="warning notification"></i>
  </div>
  <div class="c-notification__content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>
<div class="c-notification--inline-warning">
  <div class="c-notification__icon">
    <i class="icon icon--exclamation" alt="warning notification" title="warning notification"></i>
  </div>
  <div class="c-notification__content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

Copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Error

Use this type of notification to communicate major system issues or vital information that requires action from the user. Save for situations where there is risk of data loss or permanent termination from a process.


<div class="c-notification--error">
  <div class="c-notification__icon">
    <i class="icon icon--error" alt="error notification" title="error notification"></i>
  </div>
  <div class="c-notification__content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>
<div class="c-notification--inline-error">
  <div class="c-notification__icon">
    <i class="icon icon--error" alt="error notification" title="error notification"></i>
  </div>
  <div class="c-notification__content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

Copy

Design Environment

Elevation

Inline notifications will push all content below them down rather than appearing elevated above it. Page-level notifications can appear either embedded at the top of the page, or elevated on the attention pane to allow page content to scroll behind. When elevated, the notification will use a medium shadow.

Generally, you should elevate a notification with information that the user will need to remain aware of as they navigate the page content, for example, a page-level error that can be resolved from two or more parts of the page. Notifications that contain information that is not pertinent to the user's task, for example a page-level information notification of an upcoming system outage, should be embedded within the layout so as not to distract the user from the page content they're interacting with.