Permalink
Fetching contributors…
Cannot retrieve contributors at this time
97 lines (77 sloc) 3.05 KB

Label

Labels and badges for simplistic information.

Usage

Labels are small indicators that give descriptions and additional information to sections of content. Label sizing will always be smaller than their parents, allowing for easier inline integration.

<h2>Breaking news! <span class="label">New</span></h2>
Labels will automatically collapse and hide themselves if no content exists. This is achieved through the :empty pseudo.

Badges

Highlight new or unread notifications by using a .label--badge. A badge is represented with a circular shape.

<a href="/messages">Inbox <span class="label label--badge">26</span></a>

Arrows

Attract attention to an item by using .label--arrow-left or .label--arrow-right. An arrow looks like a regular label, with one side pointing in a direction.

<a href="/archives">Archives <span class="label label--arrow-right">View</span></a>

Ribbons

Improve the aesthetics of a label by wrapping it around another element using .label--ribbon-left or .label--ribbon-right. A ribbon looks like a regular label, with one side folding down as if it's wrapping an element.

<span class="label label--ribbon-left">Task List</span>

Sizes

Adding a .small or .large class to the .label element will alter the padding and font size.

<span class="label small">Small Label</span>

Variables

Variable Default Description
$label-class .label CSS class name for the label element.
$label-class-modifier-arrow-left .label--arrow-left CSS class name for the label left arrow modifier.
$label-class-modifier-arrow-right .label--arrow-right CSS class name for the label right arrow modifier.
$label-class-modifier-badge .label--badge CSS class name for the label badge modifier.
$label-class-modifier-ribbon-left .label--ribbon-left CSS class name for the label left ribbon modifier.
$label-class-modifier-ribbon-right .label--ribbon-right CSS class name for the label right ribbon modifier.
$label-modifiers ("badge", "ribbon-left", "ribbon-right", "arrow-left", "arrow-right") List of modifiers to include in the CSS output. Accepts badge, ribbon-left, ribbon-right, arrow-left, and arrow-right.