---
layout      : 'default'
css         : "label"
title       : 'Label'
description : 'Labels give descriptions to pieces of content'
type        : 'UI Element'
---

<%- @partial('header') %>

<div class="main container">

  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Content</a>
      <a class="item">Types</a>
      <a class="item">Variations</a>
      <a class="item">Groups</a>
    </div>
  </div>

  <h2 class="ui dividing header">Content</h2>
  <div class="example">
    <h4 class="ui header">Label</h4>
    <p>A basic label</p>
    <div class="ui label">
      <i class="mail icon"></i> 23
    </div>
  </div>
  <div class="example">
    <h4 class="ui header">Detail</h4>
    <p>A tag can optionally display a detail</p>
    <div class="ui label">
      Dogs
      <div class="detail">214</div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Removable</h4>
    <p>A tag can optionally be removable</p>
    <div class="ui label">
      Witty
      <i class="delete icon"></i>
    </div>
  </div>

  <h2 class="ui dividing header">Types</h2>

  <div class="example">
    <h4 class="ui header">Image</h4>
    <p>A tag can optionally display an image</p>
    <a class="ui image label">
      <img src="/images/demo/photo2.jpg">
      dog@doggington.com
      <i class="delete icon"></i>
    </a>
    <a class="ui image label">
      <img src="/images/demo/avatar2.jpg">
      james@thepooch.com
      <i class="delete icon"></i>
    </a>
    <a class="ui image label">
      <img src="/images/demo/avatar3.jpg">
      kelly@bellyscratcher.com
      <i class="delete icon"></i>
    </a>
  </div>

  <div class="example">
    <h4 class="ui header">Corner</h4>
    <p>A label can position itself in the corner of an element</p>
    <div class="yellow ui message">A corner label must be positioned inside a container with position: relative to display properly</div>
    <div class="ui segment">
      <div class="ui right red corner label">
        <i class="heart icon"></i>
      </div>
      <div class="ui left corner label">
        <div class="text">New</div>
      </div>
      This is a normal text segment
    </div>
    <div class="ui image">
      <a class="ui left corner label">
        <div class="text">New</div>
      </a>
      <a class="ui right red corner label">
        <i class="heart icon"></i>
      </a>
      <img src="/images/demo/stickfigure.jpg">
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Ribbon</h4>
    <p>A label can appear as a ribbon attaching itself to an element.</p>
    <div class="ui two column grid">
      <div class="row">
        <div class="column">
          <div class="ui raised segment">
            <div class="ui ribbon label">Dogs</div>
            <p>Pretty nice animals</p>
          </div>
        </div>
      </div>
    </div>
      <div class="existing code">
      <div class="ui ribbon label">Dogs</div>
      </div>
  </div>

  <div class="example">
    <h4 class="ui header">Attached</h4>
    <p>A label can attach to a content segment</p>
    <div class="ui three column grid">
      <div class="row">
        <div class="column">
          <div class="ui segment">
            <div class="ui top attached label">HTML</div>
            <p>This is some pretend content</p>
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            <div class="ui bottom attached label">CSS</div>
            <p>This is some pretend content</p>
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            <div class="ui top right attached label">Code</div>
            <p>This is some pretend content</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="column">
          <div class="ui segment">
            <div class="ui top left attached label">View</div>
            <p>This is some pretend content</p>
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            <div class="ui bottom left attached label">User View</div>
            <p>This is some pretend content</p>
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            <div class="ui bottom right attached label">Admin View</div>
            <p>This is some pretend content</p>
          </div>
        </div>
      </div>
    </div>
      <div class="existing code">
    <div class="ui top attached label">HTML</div>
    <div class="ui bottom attached label">CSS</div>
    <div class="ui top right attached label">Code</div>
    <div class="ui top left attached label">View</div>
    <div class="ui bottom left attached label">User View</div>
    <div class="ui bottom right attached label">Admin View</div>
      </div>
  </div>

  <h2 class="ui dividing header">Variations</h2>
  <div class="example">
    <h4 class="ui header">Colors</h4>
    <p>A label can have different colors</p>
    <a class="ui black label">
      First
    </a>
    <a class="ui green label">
      Fun
    </a>
    <a class="ui red label">
      Happy
    </a>
    <a class="ui blue label">
      Smart
    </a>
    <a class="ui purple label">
      Insane
    </a>
    <a class="ui teal label">
      Exciting
    </a>
  </div>

  <div class="example">
    <h4 class="ui header">Horizontal</h4>
    <p>A horizontal label is formatted to label content along-side it horizontally</p>
    <div class="ui divided selection list">
      <a class="item">
        <div class="ui red horizontal label">Fruit</div>
        Kumquats
      </a>
      <a class="item">
        <div class="ui purple horizontal label">Candy</div>
        Ice Cream
      </a>
      <a class="item">
        <div class="ui red horizontal label">Fruit</div>
        Orange
      </a>
      <a class="item">
        <div class="ui horizontal label">Dog</div>
        Poodle
      </a>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Circular</h4>
    <p>A label can be circular</p>
    <a class="ui black circular label">
      12
    </a>
    <a class="ui green circular label">
      11
    </a>
    <a class="ui red circular label">
      10
    </a>
    <a class="ui blue circular label">
      64
    </a>
    <a class="ui purple circular label">
      62
    </a>
    <a class="ui teal circular label">
      1
    </a>
  </div>
  <div class="another example">
    <div class="ui black circular label"></div>
    <div class="ui green circular label"></div>
    <div class="ui red circular label"></div>
    <div class="ui blue circular label"></div>
    <div class="ui purple circular label"></div>
    <div class="ui teal circular label"></div>
  </div>

  <div class="example">
    <h4 class="ui header">Floating</h4>
    <p>A label can float above another element</p>
    <div class="ui compact menu">
      <a class="item">
        <i class="icon mail"></i> Messages
        <div class="floating ui red label">22</div>
      </a>
      <a class="item">
        <i class="icon users"></i> Friends
        <div class="floating ui teal label">22</div>
      </a>
    </div>
  </div>



  <div class="example">
    <h4 class="ui header">Pointing</h4>
    <p>A label can point to content next to it</p>
    <form class="ui fluid form">
      <div class="field">
        <input type="text" placeholder="First name">
        <div class="ui pointing label">
          Please enter a value
        </div>
      </div>
      <div class="ui simple divider"></div>
      <div class="field" placeholder="Last Name">
        <div class="ui pointing below label">
          Please enter a value
        </div>
        <input type="text">
      </div>
      <div class="ui simple divider"></div>
      <div class="inline field">
        <input type="text" placeholder="Username">
        <div class="ui pointing left label">
          That name is taken!
        </div>
      </div>
      <div class="ui simple divider"></div>
      <div class="inline field">
        <div class="ui pointing right label">
          Your password must be 6 characters or more
        </div>
        <input type="password">
      </div>
    </form>
  </div>

  <div class="example">
    <h4 class="ui header">Size</h4>
    <p>A label can be small or large</p>
    <div class="ui small label">
      Fun
    </div>
    <br><br>
    <div class="ui large label">
      Fun
    </div>
  </div>

  <h2 class="ui dividing header">Groups</h2>

  <div class="example">
    <h4 class="ui header">Size</h4>
    <p>Labels can share sizes together</p>
    <div class="ui large labels">
      <div class="ui label">
        Fun
      </div>
      <div class="ui label">
        Happy
      </div>
      <div class="ui label">
        Smart
      </div>
      <div class="ui label">
        Witty
      </div>
    </div>
  </div>
  <div class="example">
    <h4 class="ui header">Colors</h4>
    <p>Labels can share colors together</p>
    <div class="ui blue labels">
      <a class="ui label">
        Fun <i class="icon close"></i>
      </a>
      <a class="ui label">
        Happy
        <div class="detail">22</div>
      </a>
      <a class="ui label">
        Smart
      </a>
      <a class="ui label">
        Insane
      </a>
      <a class="ui label">
        Exciting
      </a>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Circular</h4>
    <p>Labels can share shapes</p>
    <div class="ui circular labels">
      <a class="ui label">
        11
      </a>
      <a class="ui label">
        22
      </a>
      <a class="ui label">
        33
      </a>
      <a class="ui label">
        44
      </a>
      <a class="ui label">
        141
      </a>
    </div>
  </div>

</div>