Alerts
These modular elements can be readily used and customized across pages and in different blocks.
Explore all of Stack's modular elements
at the Element Index Page →
Alert Markup
The alert element is structured using a <div> with class .alertwith a child .alert__bodywhich houses the contents of the alert ie. the text and an element with class .alert__closewhich, when clicked - dismisses the alert.
<div class="alert"> <div class="alert__body"> <span>Here is the alert text</span> </div> <div class="alert__close"> × </div></div>
This is a neutral alert, no cause for concern.
×
Uhoh, something has gone wrong!
×
Hooray, something has gone right!
×
Here's an alert with the primary colour
×