@@include("./partials/title-meta.html", {"title": "Alerts"}) @@include('./partials/head-css.html')
@@include('./partials/topbar.html') @@include('./partials/sidenav.html')
@@include("./partials/page-title.html", {"subtitle":"UI", "title":"Alerts"})

#### Default Alert

This is a primary alert—something important you should know!
This is a secondary alert—some additional context.
Success! Your operation was completed successfully.
Error! Something went wrong—please try again.
Warning! Please double-check your inputs.
Info: Here's something you might find useful.
Light alert—just a subtle notification.
Dark alert—use for general-purpose messages.

#### Dismissing Alert with Solid Colors

Heads up! This is a primary alert with important information.
Notice: This is a secondary alert with supporting details.
Success! Your action was completed successfully.
Error! Something went wrong—please try again later.
Warning! Please review your input before proceeding.
Info: Here’s something you might find helpful.
Note: This is a light alert with a subtle message.
Notice: This dark alert is great for general messages.

#### Link Color

Need more info? Check out this primary link for important details.
Here's a secondary message with a helpful link for additional context.
Operation successful! View the results by clicking here .
Something went wrong. Learn more through this alert link .
Heads up! You might want to check this warning link .
Here’s some information that may help—click this link to read more.
Just a light reminder with a gentle link to explore.
This is a general dark alert. Find out more by clicking here .

#### Additional Content

#### Great job!

You’ve successfully read this important alert message. The text is intentionally a bit longer to demonstrate how spacing behaves in this kind of layout.

Use margin utilities to keep your content clean and organized.

#### Heads up!

This alert message gives additional information with a longer message to show content spacing within an alert.

Apply spacing classes wisely to maintain structure and clarity.

#### Notice!

You’ve just read through a primary alert message. The extra length helps show how well the layout handles content spacing.

#### Custom Alerts

A primary alert with a full border!
A secondary alert with a left border only!
A dark alert with a bottom border!
A success alert with a dashed border!
A danger alert with a thick border!
A warning alert with a custom close button!
An info alert with a custom icon!

#### Notice!

You’ve just read through a primary alert message. The extra length helps show how well the layout handles content spacing.

#### Live Alert

@@include('./partials/footer.html')
@@include('./partials/customizer.html') @@include('./partials/footer-scripts.html')