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