Alerts
Default alerts
Primary alert—At vero eos et accusamus praesentium!
Secondary alert—At vero eos et accusamus praesentium!
Success alert—At vero eos et accusamus praesentium!
Info alert—At vero eos et accusamus praesentium!
A simple light alert—check it out!
A simple dark alert—check it out!
Warning alert—At vero eos et accusamus praesentium!
Danger alert—At vero eos et accusamus praesentium!
Dismissing alerts
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.
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.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Link Color alerts
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.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Alerts with Icons
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap!Change a few things up and try submitting again.
Alerts With Icons
Default! This is a warning alert—check it out that has an icon too!
Primary! This is a warning alert—check it out that has an icon too!
Success! This is a warning alert—check it out that has an icon too!
Info! This is a warning alert—check it out that has an icon too!
Warning! This is a warning alert—check it out that has an icon too!
Danger! This is a warning alert—check it out that has an icon too!
Alert with avatar
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Alerts with Additional content
Well done!
Aww yeah, 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.
Well done!
Aww yeah, 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.
Well done!
Aww yeah, 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.
Outline Alerts
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.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Solid Colored Alerts
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Rounded Alerts
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.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Rounded Solid Colored Alerts
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Rounded Alerts Background Icons
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.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Alerts Background Icons
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.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Rounded Alerts with shadow
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.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Rounded gradient Alerts
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.