siimple 3.3.0 GitHub Examples Home
Elements
Basic elements that only require a single CSS class to go!
Tag
Small labelling element
Add the base siimple-tag class to a span or div element to style text as a tag. Then, add siimple-tag--[COLOR] to set the tag color.
Primary tag Success tag Warning tag Error tag Dark tag Light tag
<span class="siimple-tag siimple-tag--primary">Primary tag</span>
<span class="siimple-tag siimple-tag--success">Success tag</span>
<span class="siimple-tag siimple-tag--warning">Warning tag</span>
<span class="siimple-tag siimple-tag--error">Error tag</span>
<span class="siimple-tag siimple-tag--dark">Dark tag</span>
<span class="siimple-tag siimple-tag--light">Light tag</span>
Rounded tag
Added in v3.1.0
You can add the siimple-tag--rounded modifier to a tag to make it rounded.
Rounded tag
<span class="siimple-tag siimple-tag--primary siimple-tag--rounded">
    Rounded tag
</span>
Legacy colors
Tag colors introduced in v3.0.0 are still supported, but will be removed in a future major release of siimple.
Navy tag Green tag Teal tag Blue tag Purple tag Pink tag Red tag Orange tag Yellow tag Grey tag
<span class="siimple-tag siimple-tag--navy">Navy tag</span>
<span class="siimple-tag siimple-tag--green">Green tag</span>
<span class="siimple-tag siimple-tag--teal">Teal tag</span>
<span class="siimple-tag siimple-tag--blue">Blue tag</span>
<span class="siimple-tag siimple-tag--purple">Purple tag</span>
<span class="siimple-tag siimple-tag--pink">Pink tag</span>
<span class="siimple-tag siimple-tag--red">Red tag</span>
<span class="siimple-tag siimple-tag--orange">Orange tag</span>
<span class="siimple-tag siimple-tag--yellow">Yellow tag</span>
<span class="siimple-tag siimple-tag--grey">Grey tag</span>
Found a mistake or want to help improve this documentation? Suggest changes.