You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
381 lines
10 KiB
381 lines
10 KiB
---
|
|
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">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">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
|
|
<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 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="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">
|
|
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 orange label">
|
|
Radical
|
|
</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>
|