Alert

The Alert pattern is designed to work well immediately following primary navigation, and consists of a few simple classes:

  • Alert: The containing element.
  • Alert-inner: Applies padding and controls layout. Works well with u-containPage included to align with page content.
  • 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">
    <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>