siimple 3.2.0 siimple.xyz
Elements
Basic elements that only require a single CSS class to go!
Tip
A special alert to grab attention in something important
Add siimple-tip to a div tag to create a tip element.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="siimple-tip siimple-tip--primary">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
Colored tip
Set the tip color by adding a siimple-tip--[COLOR] class with the desired color.
Primary tip
Success tip
Warning tip
Error tip
<div class="siimple-tip siimple-tip--primary">
    Primary tip
</div>
<div class="siimple-tip siimple-tip--success">
    Success tip
</div>
<div class="siimple-tip siimple-tip--warning">
    Warning tip
</div>
<div class="siimple-tip siimple-tip--error">
    Error tip
</div>
Tip with an icon
You can also add a heart icon adding the siimple-tip--heart class, an exclamation icon adding the siimple-tip--exclamation class or a question icon adding the siimple-tip--question class.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="siimple-tip siimple-tip--error siimple-tip--heart">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
<div class="siimple-tip siimple-tip--warning siimple-tip--exclamation">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
<div class="siimple-tip siimple-tip--success siimple-tip--question">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
Legacy colors
Legacy colors from v3.0.0 are still supported, but keep in mind that will be removed in a future major release. Consider upgrading to our new colors API.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="siimple-tip siimple-tip--teal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
Found a mistake or want to help improve this documentation? Suggest changes.