Tag | siimple css

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.