Labels

Updated 4 months 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?