Spectre CSS

Labels ​

Labels are formatted text tags for highlighted, informative information.

default primary secondary success warning error

Add the label class to <span> or <small> elements. You can add another class label-primary, label-secondary, label-success, label-warning and label-error for colored labels.

html
<!-- normal labels -->
<span class="label">default label</span>
<span class="label label-primary">primary label</span>

Rounded labels ​

default primary

Add the label-rounded class to have rounded labels.

html
<!-- rounded labels -->
<span class="label label-rounded label-primary">primary label</span>

Smaller labels ​

small small

Use the <small> tag to create smaller (font-size: 80%) labels.

html
<!-- smaller labels -->
<small class="label label-primary">small label</small>

Note that font-size utilities are planned.