Labels

Label

Basic label

23 
<div class="wojo label">
  <i class="chat icon"></i> 23
</div>
Detail

A label can contain a detail

Items
150
<div class="wojo label">
  Items
  <div class="detail">150</div>
</div>
Removalle

A label can contain a delete icon

Witty 
<div class="wojo label">
  Witty
  <i class="delete icon"></i>
</div>
Corner Label

A label can position itself in the corner of an element

New
This is a normal text segment 
<div class="wojo segment">
  <div class="wojo right info corner label">
    <i class="heart icon"></i>
  </div>
  <div class="wojo left corner label">
    <div class="text">New</div>
  </div>
  This is a normal text segment
</div>
Ribbon Label

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

50% Off
Welcome back!

It's good to see you again. I have had a lot to think about since our last visit, I've changed much as a person and I can see that you have too. 

<div class="wojo segment">
  <div class="wojo ribbon">
    <div class="ribbon">50% Off</div>
  </div>
  <div class="header"> Welcome back! </div>
  <p> It's good to see you again. I have had a visit... </p>
</div>
Color Variations

A label can have different colors.

First Fun Happy Smart
Radical Insane Exciting 
<a class="wojo label">First</a>
<a class="wojo positive label">Fun</a>
<a class="wojo negative label">Happy</a>
<a class="wojo info label">Smart</a>
<a class="wojo warning label">Radical</a>
<a class="wojo purple label">Insane</a>
<a class="wojo teal label">Exciting</a>
Horizontal Label

A horizontal label is formatted to label content along-side it horizontally.

Fruit
Kumquats
Candy
Ice Cream
Fruit
Orange
Dog
Poodle 
<div class="wojo divided selection list">
  <a class="item">
    <div class="wojo positive horizontal label">Fruit</div>
    Kumquats
  </a>
  <a class="item">
    <div class="wojo purple horizontal label">Candy</div>
    Ice Cream
  </a>
  <a class="item">
    <div class="wojo negative horizontal label">Fruit</div>
    Orange
  </a>
  <a class="item">
    <div class="wojo horizontal label">Dog</div>
    Poodle
  </a>
</div>
Circular Label

A label can be circular.

12 11 10 64 62 1 
<a class="wojo circular label"> 12 </a>
<a class="wojo positive circular label"> 11 </a>
<a class="wojo negative circular label"> 10 </a>
<a class="wojo info circular label"> 64 </a>
<a class="wojo purple circular label"> 62 </a>
<a class="wojo teal circular label"> 1 </a>
<div class="wojo circular label"></div>
<div class="wojo positive circular label"></div>
<div class="wojo negative circular label"></div>
<div class="wojo info circular label"></div>
<div class="wojo purple circular label"></div>
<div class="wojo teal circular label"></div>