--- layout : 'default' css : "label" title : 'Label' description : 'Labels give descriptions to pieces of content' type : 'UI Element' --- <%- @partial('header') %>

Types

Label

A basic label

23

Detail

A label can contain a detail

Dogs
214

Removable

A label can contain a delete icon

Witty

Link

A label can contain a text link

Inbox 23

Image

A label can be formatted to include an image

dog@doggington.com james@thepooch.com kelly@bellyscratcher.com

Corner

A label can position itself in the corner of an element

A corner label must be positioned inside a container with position: relative to display properly
New
This is a normal text segment

Ribbon

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

Dogs

Pretty nice animals.

Cats

Also pretty nice animals, but can prefer solitude.

Ogres and monsters

Never seen one as a pet before, but I imagine they'd make pretty terrible companions.

Dogs

Attached

A label can attach to a content segment

HTML

This is some pretend content

CSS

This is some pretend content

Code

This is some pretend content

View

This is some pretend content

User View

This is some pretend content

Admin View

This is some pretend content

HTML
CSS
Code
View
User View
Admin View

Variations

Colors

A label can have different colors

First Fun Happy Smart Radical Insane Exciting

Horizontal

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

Circular

A label can be circular

12 11 10 64 62 1

Floating

A label can float above another element

Pointing

A label can point to content next to it

Please enter a value
Please enter a value
That name is taken!
Your password must be 6 characters or more

Size

A label can be small or large

Fun


Fun

Groups

Size

Labels can share sizes together

Fun
Happy
Smart
Witty

Colors

Labels can share colors together

Circular

Labels can share shapes