Label
Basic
Simply add the class .label to any element that needs to be styled as shown below. Styling is followed by classes .-primary, .-info, .-success, .-warning, .-danger.
Default boring label
Default
Downloaded
Primary
Uploaded
Success
Pending invite
Warning
Deleted
Danger
<!-- Default label -->
<span class="label">Default boring label</span>
<!-- Primary label -->
<span class="label -primary">Downloaded</span>
<!-- Success label -->
<span class="label -success">Uploaded</span>
<!-- Warning label -->
<span class="label -warning">Pending invite</span>
<!-- Danger label -->
<span class="label -danger">Deleted</span>
Border only
Add class .-border-only to enable this style.
Default boring label
Default
Downloaded
Primary
Uploaded
Success
Pending invite
Warning
Deleted
Danger
<!-- Default label -->
<span class="label -border-only">Default boring label</span>
<!-- Primary label -->
<span class="label -border-only -primary">Downloaded</span>
<!-- Success label -->
<span class="label -border-only -success">Uploaded</span>
<!-- Warning label -->
<span class="label -border-only -warning">Pending invite</span>
<!-- Danger label -->
<span class="label -border-only -danger">Deleted</span>
Larger size
For displaying larger labels simply add the class .-large.
Default boring label
Default
Downloaded
Primary
Uploaded
Success
Pending invite
Warning
Deleted
Danger
<!-- Larger labels -->
<span class="label -large">Default boring label</span>
<span class="label -large -primary">Downloaded</span>
<span class="label -large -success">Uploaded</span>
<span class="label -large -warning">Pending invite</span>
<span class="label -large -danger">Danger</span>
Related mixin
@mixin general-label($background-color, $border-color, $text-color) {
@if $background-color == null {
background-color: $white;
} @else {
background-color: $background-color;
}
@if $border-color == null {
border: 0;
} @else {
border: 1px solid $border-color;
}
color: $text-color;
}
Example
Usage:
@include general-label($primary-color, null, $primary-color-light-100);
CSS Output:
background-color: #c46345;
border: 0;
color: #f5e5e0;