Home Get Started Examples

Tags

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

Class list

  • .tags
  • .tags.r-round
  • .tags.r-0

Description

Use the .tags class on a span to group together a set of .tag elements. The font-size of a .tags is based on the font-size of its parent element.

Structure

1 2 3 
<span class="tags h4">
    <span class="tag">1</span>
    <span class="tag">2</span>
    <span class="tag">3</span>
</span>

Radius utilities

Using the border-radius utility classes .r-0, or .r-round on a .tags affects the child .tag elements of the .tags.

1 2 3 1 2 3 
<span class="tags h4 r-round">
    <span class="tag">1</span>
    <span class="tag">2</span>
    <span class="tag">3</span>
</span>
<span class="tags h4 r-0">
    <span class="tag">1</span>
    <span class="tag">2</span>
    <span class="tag">3</span>
</span>

Font size scaling

Use the font-size utility classes on a .tags to have its child .tag elements inherit that font-size.

1 2 3 1 2 3 1 2 3 
<span class="tags h5">
    <span class="tag">1</span>
    <span class="tag">2</span>
    <span class="tag">3</span>
</span>
<span class="tags h4">
    <span class="tag">1</span>
    <span class="tag">2</span>
    <span class="tag">3</span>
</span>
<span class="tags h3">
    <span class="tag">1</span>
    <span class="tag">2</span>
    <span class="tag">3</span>
</span>
previous next