Stack | Multipurpose HTML Template with Variant Page Builder
Sign up with Email
Already have an account? Login

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 .alert with a child .alert__body which houses the contents of the alert ie. the text and an element with class .alert__close which, 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
×