Alert Component

Basic Usage

This is an alert.

<div class="alert">This is an alert.</div>

Variants

Colored Alerts

This is a white alert.

This is a black alert.

This is the lightest alert.

This is a light alert.

This is a neutral alert.

This is a dark alert.

This is the darkest alert.

This is a primary alert.

This is a secondary alert.

This is a tertiary alert.

This is a quaternary alert.

This is a success alert.

This is an error alert.

This is a warning alert.

This is a notice alert.

This is an info alert.

This is a deprecated alert.

This is a decorative alert.

This is a muted alert.

<div class="alert alert-white" href="#">This is a white alert.</div>
<div class="alert alert-black" href="#">This is a black alert.</div>
<div class="alert alert-lightest" href="#">This is the lightest alert.</div>
<div class="alert alert-light" href="#">This is a light alert.</div>
<div class="alert alert-neutral" href="#">This is a neutral alert.</div>
<div class="alert alert-dark" href="#">This is a dark alert.</div>
<div class="alert alert-darkest" href="#">This is the darkest alert.</div>
<div class="alert alert-primary" href="#">This is a primary alert.</div>
<div class="alert alert-secondary" href="#">This is a secondary alert.</div>
<div class="alert alert-tertiary" href="#">This is a tertiary alert.</div>
<div class="alert alert-quaternary" href="#">This is a quaternary alert.</div>
<div class="alert alert-success" href="#">This is a success alert.</div>
<div class="alert alert-error" href="#">This is an error alert.</div>
<div class="alert alert-warning" href="#">This is a warning alert.</div>
<div class="alert alert-notice" href="#">This is a notice alert.</div>
<div class="alert alert-info" href="#">This is an info alert.</div>
<div class="alert alert-deprecated" href="#">This is a deprecated alert.</div>
<div class="alert alert-decorative" href="#">This is a decorative alert.</div>
<div class="alert alert-muted" href="#">This is a muted alert.</div>