Tag


displayinline-block positionunchanged z-indexunchanged font-size scalingyes breakpointsno

Class list

  • .tag
  • .tag .tag-a
  • .tag .close

Description

Use a .tag on a span to draw attention to a specific piece of text information. The font-size of a .tag is based on the font-size of its parent element.

Example

lorem 2

ipsum 1

dolor 0
<h3>lorem <span class="tag">2</span></h3>
<p>ipsum <span class="tag">1</span></p>
<h5>dolor <span class="tag">0</span></h5>

Tag A

If you want to include a link inside of a .tag, use the .tag-a class on the a element within the .tag

<span class="tag h4">
    <a href="/path/to/wherever" class="tag-a">link</a>
</span>

Close

A .close can be put inside of a .tag.

<span class="tag h4">
    <button class="close"></button>
</span>

Font size scaling

Use the font-size utility classes directly on a .tag to scale the element.

tag tag tag tag tag
<span class="tag h5">tag</span>
<span class="tag h4">tag</span>
<span class="tag h3">tag</span>
<span class="tag h2">tag</span>
<span class="tag h1">tag</span>

Themes

Use the theme classes on a .tag, (or other elements), to have that themes styles applied.

tag tag tag tag tag tag
<span class="tag h4 primary">tag</span>
<span class="tag h4 info">tag</span>
<span class="tag h4 caution">tag</span>
<span class="tag h4 danger">tag</span>
<span class="tag h4 light">tag</span>
<span class="tag h4 dark">tag</span>