Menu

Label
A label displays content classification

Download

Types

Label

A label

23

Image

A label can be formatted to emphasize an image

Joe Elliot Stevie
Adrienne
Zoe
Nan

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
Please enter a value
Please enter a value
That name is taken!
Your password must be 6 characters or more

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. If a container is rounded you will need to add overflow:hidden to the container to produce a rounded label.

Tag

A label can appear as a tag

New Upcoming Featured

Ribbon

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

Overview Account Details Community User Reviews
Hotel
Food

Attached

A label can attach to a content segment

Attached labels attempt to intelligently pad other content to account for their position, but may not in all cases apply this padding correctly.

If this happens you may need to manually correct the padding of the other elements inside the container.

HTML
CSS
Code
View
User View
Admin View
HTML
CSS
Code
View
User View
Admin View

Horizontal

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

Floating

A label can float above another element.

A floating label must be positioned inside a container with position: relative to display properly.

Content

Detail

A label can contain a detail

Dogs
214

Icon

A label can include an icon

Mail Tag

Image

A label can include an image

Elliot Stevie

Link

A label can be a link or contain an item that links

23

Variations

Circular

A label can be circular

2 2 2 2 2 2 2 2 2 2 2 2 2

Basic
New in 2.1

A label can reduce its complexity

Basic Pointing Elliot Red Pointing Blue

Colored

A label can have different colors

Primary Secondary Red Orange Yellow Olive Green Teal Blue Violet Purple Pink Brown Grey Black

Size

A label can be small or large

Mini
Tiny
Small
Medium
Large
Big
Huge
Massive

Groups

Group Size

Labels can share sizes together

Fun
Happy
Smart
Witty

Colored Group

Labels can share colors together

Tag Group

Labels can share tag formatting

Circular Group

Labels can share shapes

Dimmer Message
Dimmer sub-header