siimple 3.2.0 siimple.xyz
Components
Reusable advanced elements, including alerts, lists and more!
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...
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
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.