Small and adaptive tag for adding context to just about any content.
Tags scale to match the size of the immediate parent element by using relative font sizing and em units.
Example paragraph New
<h1>Example heading <span class="tag tag-warning">New</span></h1>
<h2>Example heading <span class="tag tag-warning">New</span></h2>
<p class="mb-0">Example paragraph <span class="tag tag-warning">New</span></p><span class="tag tag-primary">Primary</span>
<span class="tag tag-default">Default</span>
<span class="tag tag-accent">Accent</span>
<span class="tag tag-success">Success</span>
<span class="tag tag-warning">Warning</span>
<span class="tag tag-danger">Danger</span>Use the .tag-pill modifier class if you miss the badges from v3.
Paragraph
Default 3 Accent Success Warning Danger<p class="tag tag-pill tag-primary mb-0">Paragraph</p>
<span class="tag tag-pill tag-default">Default</span>
<span class="tag tag-pill tag-accent">3</span>
<span class="tag tag-pill tag-accent">Accent</span>
<span class="tag tag-pill tag-success">Success</span>
<span class="tag tag-pill tag-warning">Warning</span>
<span class="tag tag-pill tag-danger">Danger</span><span class="tag tag-simple">Default</span>
<span class="tag tag-simple tag-primary">Default</span>
<span class="tag tag-simple tag-accent">Default</span>
<span class="tag tag-simple tag-success">Success</span>
<span class="tag tag-simple tag-warning">Warning</span>
<span class="tag tag-simple tag-danger">Danger</span>Use the status variations inside the container .tag-status-block.
Invaders
<span class="icon icon-calendar icon-2x tag-status-block">
<span class="tag-status tag-status-accent"></span>
</span>
<span class="icon icon-server icon-3x tag-status-block">
<span class="tag-status tag-status-success"></span>
</span>
<span class="icon icon-rewards-trophy icon-4x tag-status-block">
<span class="tag-status tag-status-danger"></span>
</span>
<span class="icon icon-game-gameboy icon-5x tag-status-block">
<span class="tag-status tag-status-warning"></span>
</span>
<p class="tag-status-block mb-0">
<span class="tag-status tag-status-danger"></span>
Invaders
</p>
<span class="tag-status-block">
<span class="tag-status tag-status-success"></span>
<svg class="img-svg img-3x align-bottom">
<use xlink:href="//design.umbler.com//assets/svg/sprite-umbler.svg#img-umblercoin-gold"></use>
</svg>
</span>
<span class="tag-status-block">
<span class="tag-status tag-status-danger"></span>
<svg class="img-svg img-2x align-bottom">
<use xlink:href="//design.umbler.com//assets/svg/sprite-umbler.svg#img-umblercoin-silver"></use>
</svg>
</span>The pulse effect cancel on animation-iteration-count: 10.
An icon element can be used as a container .tag-badge-block.
Invaders
<span class="icon icon-calendar icon-2x tag-badge-block">
<span class="tag-badge tag-badge-primary" data-tag-badge="6"></span>
</span>
<span class="icon icon-server icon-3x tag-badge-block">
<span class="tag-badge tag-badge-success" data-tag-badge="25"></span>
</span>
<span class="icon icon-rewards-trophy icon-4x tag-badge-block">
<span class="tag-badge tag-badge-warning" data-tag-badge="10"></span>
</span>
<span class="icon icon-game-gameboy icon-5x tag-badge-block">
<span class="tag-badge tag-badge-accent" data-tag-badge="♥"></span>
</span>
<p class="tag-badge-block mb-0">
<span class="tag-badge tag-badge-default" data-tag-badge="5"></span>
Invaders
</p>
<span class="tag-badge-block">
<span class="tag-badge tag-badge-success" data-tag-badge="99"></span>
<svg class="img-svg img-3x align-bottom">
<use xlink:href="//design.umbler.com//assets/svg/sprite-umbler.svg#img-umblercoin-gold"></use>
</svg>
</span>
<span class="tag-badge-block">
<span class="tag-badge tag-badge-danger" data-tag-badge="0"></span>
<svg class="img-svg img-2x align-bottom">
<use xlink:href="//design.umbler.com//assets/svg/sprite-umbler.svg#img-umblercoin-silver"></use>
</svg>
</span>