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.

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