Astro Alerts - Ecommerce
Provide contextual feedback messages for typical user actions with the handful of available and flexible Astro alerts.
Examples
Dark! This is a dark alert—check it out!
White! This is a white alert—check it out!
Primary! This is a primary alert—check it out!
Secondary! This is a secondary alert—check it out!
Info! This is a info alert—check it out!
Success! This is a success alert—check it out!
Danger! This is a danger alert—check it out!
Warning! This is a warning alert—check it out!
<div class="alert alert-dark text-dark text-sm" role="alert">
<strong>Dark!</strong> This is a dark alert—check it out!
</div>
<div class="alert alert-white text-dark text-sm" role="alert">
<strong>White!</strong> This is a white alert—check it out!
</div>
<div class="alert alert-primary text-dark text-sm" role="alert">
<strong>Primary!</strong> This is a primary alert—check it out!
</div>
<div class="alert alert-secondary text-dark text-sm" role="alert">
<strong>Secondary!</strong> This is a secondary alert—check it out!
</div>
<div class="alert alert-info text-dark text-sm" role="alert">
<strong>Info!</strong> This is a info alert—check it out!
</div>
<div class="alert alert-success text-dark text-sm" role="alert">
<strong>Success!</strong> This is a success alert—check it out!
</div>
<div class="alert alert-danger text-dark text-sm" role="alert">
<strong>Danger!</strong> This is a danger alert—check it out!
</div>
<div class="alert alert-warning text-dark text-sm" role="alert">
<strong>Warning!</strong> This is a warning alert—check it out!
</div>
With Gradients
Dark! This is a dark alert—check it out!
White! This is a white alert—check it out!
Primary! This is a primary alert—check it out!
Secondary! This is a secondary alert—check it out!
Info! This is a info alert—check it out!
Success! This is a success alert—check it out!
Danger! This is a danger alert—check it out!
Warning! This is a warning alert—check it out!
<div class="alert bg-gradient-dark text-dark text-white " role="alert">
<strong>Dark!</strong> This is a dark alert—check it out!
</div>
<div class="alert bg-gradient-white text-dark text-white " role="alert">
<strong>White!</strong> This is a white alert—check it out!
</div>
<div class="alert bg-gradient-primary text-dark text-white " role="alert">
<strong>Primary!</strong> This is a primary alert—check it out!
</div>
<div class="alert bg-gradient-secondary text-dark text-white " role="alert">
<strong>Secondary!</strong> This is a secondary alert—check it out!
</div>
<div class="alert bg-gradient-info text-dark text-white " role="alert">
<strong>Info!</strong> This is a info alert—check it out!
</div>
<div class="alert bg-gradient-success text-dark text-white " role="alert">
<strong>Success!</strong> This is a success alert—check it out!
</div>
<div class="alert bg-gradient-danger text-dark text-white " role="alert">
<strong>Danger!</strong> This is a danger alert—check it out!
</div>
<div class="alert bg-gradient-warning text-dark text-white " role="alert">
<strong>Warning!</strong> This is a warning alert—check it out!
</div>
With Icon
Warning! This is a warning alert—check it out that has an icon too!
<div class="alert bg-gradient-warning text-white text-sm" role="alert">
<span class="alert-icon"><i class="ni ni-notification-70"></i></span>
<span class="alert-text"><strong>Warning!</strong> This is a warning alert—check it out that has an icon too!</span>
</div>Dismissing
Dark! This is a dark alert—check it out!
White! This is a white alert—check it out!
Primary! This is a primary alert—check it out!
Secondary! This is a secondary alert—check it out!
Info! This is a info alert—check it out!
Success! This is a success alert—check it out!
Danger! This is a danger alert—check it out!
Warning! This is a warning alert—check it out!
<div class="alert bg-gradient-dark alert-dismissible text-sm text-white fade show" role="alert">
<span class="alert-icon"><i class="ni ni-tag"></i></span>
<span class="alert-text"><strong>Dark!</strong> This is a dark alert—check it out!</span>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert bg-gradient-white alert-dismissible text-sm text-white fade show" role="alert">
<span class="alert-icon"><i class="ni ni-tag"></i></span>
<span class="alert-text"><strong>White!</strong> This is a white alert—check it out!</span>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert bg-gradient-primary alert-dismissible text-sm text-white fade show" role="alert">
<span class="alert-icon"><i class="ni ni-tag"></i></span>
<span class="alert-text"><strong>Primary!</strong> This is a primary alert—check it out!</span>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert bg-gradient-secondary alert-dismissible text-sm text-white fade show" role="alert">
<span class="alert-icon"><i class="ni ni-tag"></i></span>
<span class="alert-text"><strong>Secondary!</strong> This is a secondary alert—check it out!</span>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert bg-gradient-info alert-dismissible text-sm text-white fade show" role="alert">
<span class="alert-icon"><i class="ni ni-tag"></i></span>
<span class="alert-text"><strong>Info!</strong> This is a info alert—check it out!</span>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert bg-gradient-success alert-dismissible text-sm text-white fade show" role="alert">
<span class="alert-icon"><i class="ni ni-tag"></i></span>
<span class="alert-text"><strong>Success!</strong> This is a success alert—check it out!</span>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert bg-gradient-danger alert-dismissible text-sm text-white fade show" role="alert">
<span class="alert-icon"><i class="ni ni-tag"></i></span>
<span class="alert-text"><strong>Danger!</strong> This is a danger alert—check it out!</span>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert bg-gradient-warning alert-dismissible text-sm text-white fade show" role="alert">
<span class="alert-icon"><i class="ni ni-tag"></i></span>
<span class="alert-text"><strong>Warning!</strong> This is a warning alert—check it out!</span>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>