Tip | siimple css

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.

<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.