Top

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>
Top

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.