|
|
---layout : 'default'css : 'label'
element : 'label'elementType : 'element'
title : 'Label'description : 'Labels give descriptions to pieces of content'type : 'UI Element'
themes : ['Default']---<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/label.less" />---
<%- @partial('header') %>
<div class="main container">
<div class="peek"> <div class="ui vertical pointing secondary menu"> <a class="active item">Types</a> <a class="item">Variations</a> <a class="item">Groups</a> </div> </div>
<h2 class="ui dividing header">Types</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 label can contain 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 label can contain a delete icon</p> <div class="ui label"> Witty <i class="delete icon"></i> </div> </div>
<div class="example"> <h4 class="ui header">Link</h4> <p>A label can contain a text link</p> <div class="ui label"> Inbox <a class="detail"><i class="mail icon"></i> 23</a> </div> </div>
<div class="example"> <h4 class="ui header">Image</h4> <p>A label can be formatted to include an image</p> <a class="ui image label"> <img src="/images/demo/photo2.jpg"> dog@doggington.com </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 <div class="detail">Friend</div> </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 left floated medium image"> <a class="ui left corner label"> <div class="text">New</div> </a> <img src="/images/demo/highres2.jpg"> </div> <div class="ui left floated medium image"> <a class="ui right red corner label"> <i class="heart icon"></i> </a> <img src="/images/demo/highres3.jpg"> </div> </div> <div class="clearing example"> <h4 class="ui header">Tag</h4> <p>A label can appear as a tag</p> <a class="ui tag label">New</a> <a class="ui red tag label">Upcoming</a> <a class="ui teal tag label">Featured</a> </div>
<div class="clearing 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 class="ui teal ribbon label">Cats</div> <p>Also pretty nice animals, but can prefer solitude.</p> <div class="ui red ribbon label">Ogres and monsters</div> <p>Never seen one as a pet before, but I imagine they'd make pretty terrible companions.</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">Black Label</a> <a class="ui yellow label">Yellow Label</a> <a class="ui green label">Green Label</a> <a class="ui blue label">Blue Label</a> <a class="ui orange label">Orange Label</a> <a class="ui purple label">Purple Label</a> <a class="ui red label">Red Label</a> <a class="ui teal label">Teal Label</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 empty circular label"></div> <div class="ui green empty circular label"></div> <div class="ui red empty circular label"></div> <div class="ui blue empty circular label"></div> <div class="ui purple empty circular label"></div> <div class="ui teal empty 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">Tag</h4> <p>Labels can share tag formatting</p> <div class="ui tag labels"> <a class="ui label"> $10.00 </a> <a class="ui label"> $19.99 </a> <a class="ui label"> $24.99 </a> <a class="ui label"> $30.99 </a> <a class="ui label"> $10.25 </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>
|
