Alert

The Alert pattern is designed to alert customers to important information.

It works well immediately following primary navigation, or inline after related content.

It consists of a few classes:

  • Alert: The containing element.
  • Alert-inner: Applies padding and controls layout. Works well with u-containPage included to align with page content.
  • Alert-icon: An optional icon accompanying the text.
  • Alert-message: Ideally contains just a sentence or two of text content.
  • Alert-action: Contains an actionable element, for example a Button.

Fraud Alert: There are active websites posing as authorized retailers to take advantage of those most in need.

Learn More

<div class="Alert ">
  <div class="Alert-inner u-containPage">
    <svg width="24" height="28" viewBox="0 0 24 28" class="Alert-icon">
      <path d="M12 2c6.625 0 12 5.375 12 12s-5.375 12-12 12-12-5.375-12-12 5.375-12 12-12zM14 21.484v-2.969c0-0.281-0.219-0.516-0.484-0.516h-3c-0.281 0-0.516 0.234-0.516 0.516v2.969c0 0.281 0.234 0.516 0.516 0.516h3c0.266 0 0.484-0.234 0.484-0.516zM13.969 16.109l0.281-9.703c0-0.109-0.047-0.219-0.156-0.281-0.094-0.078-0.234-0.125-0.375-0.125h-3.437c-0.141 0-0.281 0.047-0.375 0.125-0.109 0.063-0.156 0.172-0.156 0.281l0.266 9.703c0 0.219 0.234 0.391 0.531 0.391h2.891c0.281 0 0.516-0.172 0.531-0.391z" />
    </svg>

    <p class="Alert-message">
      <b>Fraud Alert:</b> There are active websites posing as authorized
      retailers to take advantage of those most in need.
    </p>
    <p class="Alert-action">
      <a class="Button" href="#">
          Learn More
          <svg width="16" height="16" viewBox="-9 -6 32 32" class="Icon">
  <polygon points="0,0 7,0 14,10 7,20 0,20 7,10"/>
</svg>
        </a>
    </p>
  </div>
</div>

When alerts are used inline among other page content, it can improve readability to left align alert content on large screens. By adding the Alert--alignLeft modifier you can update the alignment, and apply other alignment-related tweaks.

Fraud Alert: There are active websites posing as authorized retailers to take advantage of those most in need.

Learn More

Less urgent alerts use a different background color to communicate they are lower priority. This can be achieved with the Alert--secondary modifier.

Fraud Alert: There are active websites posing as authorized retailers to take advantage of those most in need.

Learn More