Alert | siimple css

Alert

Display block messages

Add siimple-alert to transform a div into an alert. you can specify the alert color by adding siimple-alert--[COLOR].

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

<div class="siimple-alert siimple-alert--primary">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>

Colored alert

You can specify the alert color by adding siimple-alert--[COLOR].

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

<div class="siimple-alert siimple-alert--primary">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
<div class="siimple-alert siimple-alert--success">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
<div class="siimple-alert siimple-alert--warning">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
<div class="siimple-alert siimple-alert--error">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>

Note that the legacy colors API for the alert component are still supported, but will be removed in a future major release.

Alert title

Added in v3.1.0

You can insert a titile in your alert adding a div tag with the class siimple-alert-title.

Alert title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="siimple-alert siimple-alert--error">
  <div class="siimple-alert-title">Alert title</div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>

Alert close

Added in v3.2.0

You can add a div with a siimple-alert-close class to display a close button inside the alert component.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="siimple-alert siimple-alert--warning">
  <div class="siimple-alert-close"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>

Found a mistake or want to help improve this documentation? Suggest changes.