Web Style Guide: Alerts

HTML: Alerts

Alerts are often event-driven dialog messages to the user.

HTML: Alerts

This is an example of an alert.

This is an example of a primary alert.

This is an example of a secondary alert.

This is an example of an info alert.

This is an example of a danger alert.

This is an example of a warning alert.

This is an example of a success alert.

This is an example of a light alert.

This is an example of a dark alert.

<p class="alert">
    This is an example of an alert.
</p>

<p class="alert alert-primary">
    This is an example of a primary alert.
</p>

<p class="alert alert-secondary">
    This is an example of a secondary alert.
</p>

<p class="alert alert-info">
    This is an example of a info alert.
</p>

<p class="alert alert-danger">
    This is an example of a danger alert.
</p>

<p class="alert alert-warning">
    This is an example of a warning alert.
</p>

<p class="alert alert-success">
    This is an example of a success alert.
</p>

<p class="alert alert-light">
    This is an example of a light alert.
</p>

<p class="alert alert-dark">
    This is an example of a dark alert.
</p>

HTML: Interactive Alerts w/ Close Button

An interactive alert w/ close button.

<div class="alert alert-danger" uk-alert="">
    <a class="uk-alert-close" uk-close=""></a>
    <p>An interactive alert w/ close button.</p>
</div>

Design, Tools & Training


Top