Alerts

Solid

Use .alert-{color} to apply these variants

Primary
Secondary
Info
Warning
Danger
Success
Light
Dark

Outline

Use .alert-outline-{color} to apply these variants

Primary
Secondary
Info
Warning
Danger
Success
Light
Dark

Label

Use .alert-label-{color} to apply these variants

Primary
Secondary
Info
Warning
Danger
Success
Light
Dark

Links

Use the .alert-link utility class to quickly provide matching colored links within any alert.

A simple primary alert with an example link. Give it a click if you like.

Live Alert

Click the button below to trigger a live alert with a clickable link for more details.

Icon

Add visual context to border alerts by placing your icon inside .alert-icon and the text inside .alert-content.

A simple light alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple border alert with an example link. Notice the fresh icon choice.

Border Alert

You can insert an icon to an alert element. Put your icon into .alert-icon and your content into .alert-content class.

A simple light alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.

Basic Alerts

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

Successful
Successful

You successfully read this important alert message.

Warning
Warning

Please double-check the information before proceeding.

Error
Error

Something went wrong during the payment process.

Information
Information

Your profile has been updated and saved successfully.

© Aquiry.
Crafted with by Codebucks