> For the complete documentation index, see [llms.txt](https://sh20raj.gitbook.io/skylinecss/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sh20raj.gitbook.io/skylinecss/alerts.md). # Alerts SkyLineCSS provides utility classes to create alert messages for displaying important information, warnings, or notifications to users. Alerts are commonly used to convey messages that require attention. ### Basic Alert To create a basic alert, use the `.alert` class: ```html
This is a basic alert message.
``` ### Alert Colors SkyLineCSS provides predefined color classes for alerts: * `.alert-primary`: Primary alert color * `.alert-secondary`: Secondary alert color * `.alert-success`: Success alert color * `.alert-danger`: Danger alert color * `.alert-warning`: Warning alert color Example: ```html
This is a primary alert message.
This is a success alert message.
This is a danger alert message.
This is a warning alert message.
``` ### Dismissible Alerts You can create dismissible alerts with a close button using the `.alert-dismissible` class: ```html
This is a dismissible alert message.
``` ### Alert Links You can include links in alerts: ```html
This is an alert message with a link.
``` ### Alert Headings You can add headings to alerts using the `.alert-heading` class: ```html

Alert Heading

This is an alert message with a heading.
``` ### Alert Icons You can include icons in alerts using popular icon libraries like Font Awesome: ```html
This is an alert message with an icon.
``` ### Alert Transitions SkyLineCSS provides transition effects for alerts: * `.alert-fade`: Fade in/out effect * `.alert-slide`: Slide up/down effect Example: ```html
This is a success alert with fade effect.
This is a danger alert with slide effect.
``` ### Alert Sizes You can adjust the size of alerts using the following classes: * `.alert-sm`: Small alert size * `.alert-lg`: Large alert size Example: ```html
This is a small alert.
This is a large alert.
``` ### Complete Example Here's a complete example combining different alert styles: ```html
This is a primary alert message.
This is a dismissible success alert message.

Warning Alert

This is a warning alert message with a heading.
This is a large danger alert message.
``` These are some of the available alert styling utilities in SkyLineCSS. You can combine these classes to create various types of alert messages for your projects.