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>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>