Labels

Updated 4 years ago by Wizzi

Labels

A label

<div class="ui label">
  <i class="mail icon"></i> 23
</div>

Tags

A label can appear as a tag

<a class="ui tag label">New</a>
<a class="ui red tag label">Upcoming</a>
<a class="ui teal tag label">Featured</a>

Ribbon

A label can appear as a ribbon attaching itself to an element.

<div class="ui two column grid">
  <div class="column">
    <div class="ui raised segment">
      <a class="ui red ribbon label">Overview</a>
      <span>Account Details</span>
      <p></p>
      <a class="ui blue ribbon label">Community</a> User Reviews
      <p></p>
    </div>
  </div>
  <div class="column">
    <div class="ui segment">
      <a class="ui orange right ribbon label">Specs</a>
      <p></p>
      <a class="ui teal right ribbon label">Reviews</a>
      <p></p>
    </div>
  </div>
</div>

Colored

A label can have different colors

<a class="ui primary label">Primary</a>
<a class="ui secondary label">Secondary</a>
<a class="ui red label">Red</a>
<a class="ui orange label">Orange</a>
<a class="ui yellow label">Yellow</a>
<a class="ui olive label">Olive</a>
<a class="ui green label">Green</a>
<a class="ui teal label">Teal</a>
<a class="ui blue label">Blue</a>
<a class="ui violet label">Violet</a>
<a class="ui purple label">Purple</a>
<a class="ui pink label">Pink</a>
<a class="ui brown label">Brown</a>
<a class="ui grey label">Grey</a>
<a class="ui black label">Black</a>

Size

A label can be small or large

<div class="ui mini label">
  Mini
</div>
<div class="ui tiny label">
  Tiny
</div>
<div class="ui small label">
  Small
</div>
<div class="ui label">
  Medium
</div>
<div class="ui large label">
  Large
</div>
<div class="ui big label">
  Big
</div>
<div class="ui huge label">
  Huge
</div>
<div class="ui massive label">
  Massive
</div>

How did we do?