Loading...
Alert components for displaying notifications, warnings, and feedback messages.
Customize alert variants, sizes, and options to see how they look.
This is a info alert message. It provides important information to the user.
<!-- Alert Component -->
<div class="alert alert-info" role="alert">
<span class="alert-icon">ℹ️</span>
<div class="alert-content">
<strong class="alert-title">Info</strong>
<p class="alert-message">This is a info alert message.</p>
</div>
</div><div class="alert alert-info" role="alert">
<span class="alert-icon">ℹ️</span>
<div class="alert-content">
<strong class="alert-title">Information</strong>
<p class="alert-message">This is an informational message.</p>
</div>
</div>.alert-info /* Blue - Informational messages */
.alert-success /* Green - Success messages */
.alert-warning /* Yellow - Warning messages */
.alert-error /* Red - Error messages */.alert-sm /* Small padding and text */
.alert-md /* Medium padding and text (default) */
.alert-lg /* Large padding and text */<div class="alert alert-info alert-dismissible" role="alert">
<span class="alert-icon">ℹ️</span>
<div class="alert-content">
<strong class="alert-title">Information</strong>
<p class="alert-message">This alert can be dismissed.</p>
</div>
<button class="alert-close" aria-label="Close">×</button>
</div>