Alerts

div.alert.alert-{type}

Default alert message without specified alert type class name.

Default alert message with specified alert type class name, and aligned center.

Your form submission was successful. Example link in an alert. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is just a warning. You should take heed. Example link in an alert. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Please enter valid email address. Example link in an alert. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is an info alert. Example link in an alert. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is an alert with multiple paragraphs tags. Example link in an alert.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Minim irure amet non irure reprehenderit consectetur ut sint sint aute nisi esse aliquip. Fugiat nisi veniam labore excepteur culpa sunt in irure et adipisicing elit adipisicing.

div.alert.alert-empty

You haven’t made any event bookings yet. Explore upcoming events and make a booking to get started. Explore Events

Without alert icon:

div.alert.alert-success.mod-hidden-alert-icon

This is an info alert without icon. Example link in an alert. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dismissible alert message:

div.alert.alert-success.is-collapsible

Your form submission was successful

Dismissible alert but without alert icon.

This is a dismissible alert with multiple paragraphs tags. Example link in an alert.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Alert with buttons:

div.alert.alert-info.alert-with-buttons

It looks like you're creating a new user (name has changed). Would you like us to deactivate Carmen Jones and create a new contact Bob Cratchet?

Create new user Update current user

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Example button

Alert texts:

div.alert-text.alert-text-{type}

Default alert text without specified alert text type class name.

Alter text info. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Alter text success. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Alter text warning. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Alter text danger. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Alert text with regular font style. Font icon color depends on alert-text type.

div.alert-text.alert-text-warning.mod-regular

You have 1 event booking awaiting payment. This booking is not yet confirmed. Please review and complete the payment to confirm it.