Options

Header Skins

Sidebar Skins

Layout Options

Layout Options

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.

Alert Colors

.alert .alert-color

Bazinga! This is a multi-purpose alert that's useful anywhere!.
Well done! You successfully read this important alert messageg.
Heads up! This alert needs your attention, it's kinda important.
Warning! Best check yo self, you're not looking too good.
Oh snap! You need to Change a few things up and try again.
Oh snap! You need to Change hings up and chive on.
Oh snap! You need to Change hings up and chive on.

Alert Color Variations
Shade variations available for all colors.

.alert .alert-primary .pastel .light .dark

The Pastel Shade! Style this way using the class .pastel
The Light Shade! Style this way using the class .light
The Default Shade! Does not require any additional classes.
The Dark Shade! Style this way using the class .dark

.alert .alert-info .pastel .light .dark

The Pastel Shade! Style this way using the class .pastel
The Light Shade! Style this way using the class .light
The Default Shade! Does not require any additional classes.
The Dark Shade! Style this way using the class .dark

Alert Neutrals

.alert .alert-light .alert-dark

Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.

Alert Toggles

.alert .alert-micro

Alert Sizes

.alert .alert-micro

Oh snap! You need to Change hings up and chive on.

.alert .alert-sm

Oh snap! You need to Change hings up and chive on.

.alert - Default

Oh snap! You need to Change hings up and chive on.

Alert Borders

.alert-border-left

Oh snap! You need to Change hings up and chive on.

.alert-border-right

Oh snap! You need to Change hings up and chive on.

.alert-border-top

Oh snap! You need to Change hings up and chive on.

.alert-border-bottom

Oh snap! You need to Change hings up and chive on.

Alert Gradient

Default - .alert

Oh snap! You need to Change hings up and chive on.

.alert .alert-gradient

Oh snap! You need to Change hings up and chive on.

Alert Icon
Simply add any icon class before or after alert text.

Oh snap! You need to Change hings up and chive on.

Alert Combined Options

.alert-color .alert-micro .alert-border-left

Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Heads up! This alert attention, but it's not super important.
Heads up! This alertattention, but it's not super important.
Heads up! This alert needs your attention
Heads up! This alert needs your attention
Heads up! This alert needs your attention

Block Style Alerts

Alerts can handle more than 1 line of text!


Well done!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores in eveniet sapiente error fuga tenetur ex ea dignissimos voluptas ab molestiae eos totam quo dolorem maxime illo neque quia itaque.


Okay

Well done!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores in eveniet sapiente error fuga tenetur ex ea dignissimos voluptas ab molestiae eos totam quo dolorem maxime illo neque quia itaque.


Okay

Well done!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores in eveniet sapiente error fuga tenetur ex ea dignissimos voluptas ab molestiae eos totam quo dolorem maxime illo neque quia itaque.


Okay

Well done!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores in eveniet sapiente error fuga tenetur ex ea dignissimos voluptas ab molestiae eos totam quo dolorem maxime illo neque quia itaque.


Okay

Well done!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores in eveniet sapiente error fuga tenetur ex ea dignissimos voluptas ab molestiae eos totam quo dolorem maxime illo neque quia itaque.


Okay

Well done!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores in eveniet sapiente error fuga tenetur ex ea dignissimos voluptas ab molestiae eos totam quo dolorem maxime illo neque quia itaque.


Okay

Well done!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores in eveniet sapiente error fuga tenetur ex ea dignissimos voluptas ab molestiae eos totam quo dolorem maxime illo neque quia itaque.


Okay

Well done!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores in eveniet sapiente error fuga tenetur ex ea dignissimos voluptas ab molestiae eos totam quo dolorem maxime illo neque quia itaque.


Okay