Alert
A notification or status message.
Statuses
To create an Alert, create a div with the class alert.
Inside it, create another div with the class alert-content.
Place the desired message inside the alert-content element.
Every Alert must have exactly one status, which you can set by adding one of the following additional classes to the root element:
infosuccesswarningerror
No payment is due at this time.
Your profile was updated successfully.
Your connection is unstable.
Your request couldn't be processed at this time. Please
try again later.
<div class="alert info">
<div class="alert-content">
No payment is due at this time.
</div>
</div>
<div class="alert success">
<div class="alert-content">
Your profile was updated successfully.
</div>
</div>
<div class="alert warning">
<div class="alert-content">
Your connection is unstable.
</div>
</div>
<div class="alert error">
<div class="alert-content">
Your request couldn't be processed at this time. Please
try again later.
</div>
</div>Subtle
To make an Alert less visually prominent, add the subtle class to its root element.
No payment is due at this time.
Your profile was updated successfully.
Your connection is unstable.
Your request couldn't be processed at this time. Please
try again later.
<div class="alert info subtle">
<div class="alert-content">
No payment is due at this time.
</div>
</div>
<div class="alert success subtle">
<div class="alert-content">
Your profile was updated successfully.
</div>
</div>
<div class="alert warning subtle">
<div class="alert-content">
Your connection is unstable.
</div>
</div>
<div class="alert error subtle">
<div class="alert-content">
Your request couldn't be processed at this time. Please
try again later.
</div>
</div>Title
To add a title to an Alert, add the class alert-title to the first child of the alert-content element.
Fun Fact
The tip of a shoelace is called an aglet.
<div class="alert info">
<div class="alert-content">
<p class="alert-title">Fun Fact</p>
<p>The tip of a shoelace is called an aglet.</p>
</div>
</div>