Alerts
Alerts are messages that provide information to the user.
Heads Up! some info here
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur, ipsam laboriosam alias reiciendis mollitia dolores!
<div class="c-alert c-alert--info alert">
<span class="c-alert__icon">
<i class="feather icon-info"></i>
</span>
<div class="c-alert__content">
<h4 class="c-alert__title">Heads Up! some info here</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur, ipsam laboriosam alias reiciendis mollitia dolores!</p>
</div>
</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
Heads Up! some info here
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur, ipsam laboriosam alias reiciendis mollitia dolores!
All servers are now running smoothly again! Thanks.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur, ipsam laboriosam alias reiciendis mollitia dolores!
Warning. Loading of this page taking a way too long.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur, ipsam laboriosam alias reiciendis mollitia dolores!
Error. Can’t connect to the platform.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur, ipsam laboriosam alias reiciendis mollitia dolores!
<div class="c-alert c-alert--info u-mb-medium">
<span class="c-alert__icon">
<i class="feather icon-info"></i>
</span>
<div class="c-alert__content">
<h4 class="c-alert__title">Heads Up! some info here</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur, ipsam laboriosam alias reiciendis mollitia dolores!</p>
</div>
</div>
<div class="c-alert c-alert--success u-mb-medium">
<span class="c-alert__icon">
<i class="feather icon-check"></i>
</span>
<div class="c-alert__content">
<h4 class="c-alert__title">All servers are now running smoothly again! Thanks.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur, ipsam laboriosam alias reiciendis mollitia dolores!</p>
</div>
</div>
<div class="c-alert c-alert--warning u-mb-medium">
<span class="c-alert__icon">
<i class="feather icon-alert-triangle"></i>
</span>
<div class="c-alert__content">
<h4 class="c-alert__title">Warning. Loading of this page taking a way too long.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur, ipsam laboriosam alias reiciendis mollitia dolores!</p>
</div>
</div>
<div class="c-alert c-alert--danger alert">
<span class="c-alert__icon">
<i class="feather icon-slash"></i>
</span>
<div class="c-alert__content">
<h4 class="c-alert__title">Error. Can’t connect to the platform.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur, ipsam laboriosam alias reiciendis mollitia dolores!</p>
</div>
</div>
Closable Alerts
Heads Up! some info here.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur, ipsam laboriosam alias reiciendis mollitia dolores!
<div class="c-alert c-alert--info alert">
<span class="c-alert__icon">
<i class="feather icon-info"></i>
</span>
<div class="c-alert__content">
<h4 class="c-alert__title">Heads Up! some info here.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur, ipsam laboriosam alias reiciendis mollitia dolores!</p>
</div>
<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 Neat class names and Bootstrap class names that is because Bootstrap’s Javascript requires certain elements to have certain class names. Neat components does not use any of these classes for styling.