Default Alerts

Well done! You successfully read this important alert message.
Oh snap! Change a few things up and try submitting again.
Well done! An example warning alert with an icon.
A simple primary alert with an example link. Give it a click if you like.

Outline Alerts

Well done! You successfully read this important alert message. Oh snap! Change a few things up and try submitting again. Well done! You successfully read this important alert message. Oh snap! Change a few things up and try submitting again. 🎉

Dismissible Alerts

@if (dismissALer1) {
Well done! You successfully read this important alert message. } @if (dismissALer2) {
Oh snap! Change a few things up and try submitting again. }

Dismissible Outline Alerts

@if (dismissALer3) {
Well done! You successfully read this important alert message. } @if (dismissALer4) {
Oh snap! Change a few things up and try submitting again. }

Custom Icon Alerts

@if (staticAlertClosed) {
Primary

Oh snap! Change a few things up and try submitting again.

}

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.