Alerts
Alerts allow you to display a contextual message about your users actions. These are available in several shapes, colors and sizes.
Basic usage
Lorem ipsum dolor sit amet consectetur adipisicing elit...
<div class="ms-alert">
Lorem ipsum dolor sit amet consectetur adipisicing elit...
</div>
As with all components, different colours are available with those classes : ms-infos, ms-success, ms-danger, and ms-warning.
<div class="ms-alert ms-info">
<span class="ms-close"></span>
Lorem ipsum dolor sit amet consectetur adipisicing elit...
</div>
<div class="ms-alert ms-success">
Lorem ipsum dolor sit amet consectetur adipisicing elit...
</div>
<div class="ms-alert ms-danger">
Lorem ipsum dolor sit amet consectetur adipisicing elit...
</div>
<div class="ms-alert ms-warning">
Lorem ipsum dolor sit amet consectetur adipisicing elit...
</div>
For more informations on the icons used, consult the dedicated page.
Sizes
In order to adapt the alerts to your content, it is possible to display them in different sizes with classes ms-medium and ms-large.
<div class="ms-alert">
...
</div>
<div class="ms-alert ms-medium">
...
</div>
<div class="ms-alert ms-large">
...
</div>
Light alerts
Alerts can also have a more discret background, using the ms-outline-** classe.
<div class="ms-alert ms-outline-info">
Lorem ipsum dolor sit amet consectetur adipisicing elit...
</div>
<div class="ms-alert ms-outline-danger">
<span class="ms-close"></span>
<i class="fas fa-exclamation-circle"></i> Lorem ipsum dolor sit amet consectetur adipisicing elit...
</div>
<div class="ms-alert ms-outline-success">
<span class="ms-close"></span>
Lorem ipsum dolor sit amet consectetur adipisicing elit...
</div>
<div class="ms-alert ms-outline-warning">
<i class="fas fa-exclamation-triangle"></i> Lorem ipsum dolor sit amet consectetur adipisicing elit...
</div>
Content
The .ms-content classe allows you to write alerts containing a header composed of a title and text, as well as content placed under the header.
Title here
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit pariatur assumenda obcaecati voluptates dolor nobis.
Title
Lorem ipsum dolor sit amet consectetur adipisicing elit...
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit pariatur assumenda obcaecati voluptates dolor nobis, quasi eveniet hic alias ipsam facere illo dicta sequi. Voluptatibus sunt animi numquam magni eaque?
<div class="ms-alert ms-content ms-outline-danger">
<span class="ms-close"></span>
<h3>Title here</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit pariatur assumenda obcaecati voluptates dolor nobis.
</p>
</div>
<div class="ms-alert ms-content ms-success">
<h3>Title</h3>
<p>
<i>Lorem ipsum dolor sit amet consectetur adipisicing elit...</i>
</p>
<hr style="border: none;">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit pariatur assumenda obcaecati voluptates dolor nobis, quasi eveniet hic alias ipsam facere illo dicta sequi. Voluptatibus sunt animi numquam magni eaque?
</p>
</div>
Cross
A cross is also available to hide a javascript alert. To do this, simply add <span class="ms-close"></span> in your alert.
<div class="ms-alert ms-info">
<span class="ms-close"></span>
Lorem ipsum dolor sit amet consectetur adipisicing elit...
</div>