Tag
- src
- components
- tag.scss
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>