Alerts

Alerts can be used to provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For an alert, combine the class alert with a contextual color class or a color library class.

Contextual Colors

Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Oh snap! Change a few things up and try submitting again.

Color Library

In most cases, you'll probably be using contextual colors for your alerts, but you can also use any class from the color library. Below are just a few examples.

Hey You! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hey You! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hey You! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hey You! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hey You! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hey You! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hey You! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hey You! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Oh snap! Change a few things up and try submitting again.