Astral.CSS

Astral.CSS v.3.1
Get Started
Layout
Form
Components
Utilities
JavaScript
Theme
Astral.CSS is amazing! 🚀

Alert

Bold notification blocks to effectively alert users and enhance engagement on your website.

CSS alerts are an essential part of user interface design, providing essential feedback and information to users in a visually appealing way. Whether you want to alert users of a success, error, warning, or informational message, CSS alerts can help convey this information clearly and effectively. Astral.CSS Framework offers a versatile and customizable alert system that enhances user experience by delivering clear and concise messages.

Alert

Using color effectively in your alerts can significantly enhance user experience.

Alerts are available for any length of text. For proper styling, use one of the seven required contextual classes (e.g., .alert.alert--info).

A simple default alert-check it out!
A simple primary alert-check it out!
A simple secondary alert-check it out!
A simple success alert-check it out!
A simple error alert-check it out!
A simple warning alert-check it out!
A simple info alert-check it out!

A simple default alert-check it out!
A simple primary alert-check it out!
A simple secondary alert-check it out!
A simple success alert-check it out!
A simple error alert-check it out!
A simple warning alert-check it out!
A simple info alert-check it out!

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

A simple default alert with an example link.Give it a like if you like!
A simple primary alert with an example link.Give it a like if you like!
A simple secondary alert with an example link.Give it a like if you like!
A simple success alert with an example link.Give it a like if you like!
A simple error alert with an example link.Give it a like if you like!
A simple warning alert with an example link.Give it a like if you like!
A simple info alert with an example link.Give it a like if you like!

A simple default alert with an example link.Give it a like if you like!
A simple primary alert with an example link.Give it a like if you like!
A simple secondary alert with an example link.Give it a like if you like!
A simple success alert with an example link.Give it a like if you like!
A simple error alert with an example link.Give it a like if you like!
A simple warning alert with an example link.Give it a like if you like!
A simple info alert with an example link.Give it a like if you like!

Designed and built with by Rume Aluya.