Alert Types

A single primary alert-check it out!


A single secondary alert-check it out!


A single success alert-check it out!


A single danger alert-check it out!


A single warning alert-check it out!


A single info alert-check it out!


A single light alert-check it out!


A single dark alert-check it out!


Alert with Link

A simple primary alert with an example link. Give it a click if you like


A simple secondary alert with an example link. Give it a click if you like


A simple success alert with an example link. Give it a click if you like


A simple danger alert with an example link. Give it a click if you like


A simple warning alert with an example link. Give it a click if you like


A simple info alert with an example link. Give it a click if you like


Alert with Additional Content

Well done!

You successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.


Whenever you need to, be sure to use margin utilities to keep things nice and tidy.



Alert with Icon

A simple primary alert with an icon


A simple secondary alert with an icon


A simple success alert with an icon


A simple danger alert with an icon


A simple warning alert with an icon


A simple info alert with an icon


Alert with Dismiss Button
A simple warning alert with a dismiss button