1. Docs
  2. Components
  3. Alerts
Buy Now Contact

Alerts

Alerts are messages that provide information to the user.

Success! This is positive notification.

<div class="c-alert c-alert--success">
    <i class="c-alert__icon fa fa-check-circle"></i> Success! This is positive notification.
</div>

Style Variations

Define alert style by using one the modifier classes:

c-alert--success, c-alert--info, c-alert--warning or c-alert--danger

Success! This is positive notification.
All servers are now running smoothly again! Thanks.
Warning. Loading of this page taking a way too long.
Error. Can’t connect to the platform.

<div class="c-alert c-alert--success">
    <i class="c-alert__icon fa fa-check-circle"></i> Success! This is positive notification.
</div>

<div class="c-alert c-alert--info">
    <i class="c-alert__icon fa fa-info-circle"></i> All servers are now running smoothly again! Thanks.
</div>

<div class="c-alert c-alert--warning">
    <i class="c-alert__icon fa fa-exclamation-circle"></i> Warning. Loading of this page taking a way too long.
</div>

<div class="c-alert c-alert--danger">
    <i class="c-alert__icon fa fa-times-circle"></i> Error. Can’t connect to the platform.
</div>

Closable Alerts

Error. Can’t connect to the platform.

<div class="c-alert c-alert--info alert">
    <i class="c-alert__icon fa fa-times-circle"></i> Error. Can’t connect to the platform.
    <button class="c-close" data-dismiss="alert" type="button">×</button>
</div>


Javascript

This component’s interactions are powered by Bootstrap. Refer to their alert documentation for Javascript usage.

You will notice that for certain components there is a mixture of Dashboard class names and Bootstrap class names that is because Bootstrap’s Javascript requires certain elements to have certain class names. Dashboard components does not use any of these classes for styling.