Notice

Used to draw attention to important messaging

Variants

Notice notice
  • 

    <span class="notice">
  <svg class="notice__icon">
    …
  </svg>
  <p>
    A standard notice
  </p>
</span>

<span class="notice notice--warning">
  <svg class="notice__icon">
    …
  </svg>
  <p>
    A warning notice
  </p>
</span>

<span class="notice notice--alert">
  <svg class="notice__icon">
    …
  </svg>
  <p>
    An alert notice
  </p>
</span>

Usage

When to use

Use it when a message needs extra attention from the user, such as communicating that a page is missing information, or that an action may have unintended side-effects

Class Name Description
notice

The base notice class. This class alone will create a blue “info” notice.
notice--warning

A yellow “warning” notice
notice--alert

A red “alert” notice
notice__icon

Class for the notice icon