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.<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 <a href="#">take advantage</a> 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.
Less urgent alerts use a different background color to communicate they are lower priority.
This can be achieved with the Alert--secondary modifier.
Sometimes even the secondary Alert style may be too attention-grabbing.
For those times, you can use the Alert--light, Alert--neutral, and
Alert--dark modifiers.
When using the Alert--dark modifier, you should also add the
Button--primary modifier to the button.