Labels

Labels can display small amounts to information to users. They are expecially useful when the user needs to complete an action such as liking a post.

They can also be used to display groups of data. Ex. Tags on a blog post.

Label
Likes20
20

HTML

<div class="label">
    <span class="label-title">Label</span>
</div>
<div class="label">
    <span class="label-icon fa.fa-heart"></span>
    <span class="label-title">Likes</span>
    <span class="label-value">20</span>
</div>
<div class="label">
    <span class="label-icon fa.fa-heart"></span>
    <span class="label-value">20</span>
</div>

Sass

.label {
    @include elr-label;
    margin-bottom: 5px;
    margin-right: 10px;
}

Dismissible Labels

These labels are useful when you need to communicate feedback to the user.

Requires JavaScript to make the label dismissible. Example JavaScript is included in the source code below.

Dogs
Cats

HTML

<div class="label">
    <span class="label-icon fa fa-paw"></span>
    <span class="label-title">Dogs</span>
    <span class="fa.fa-times label-close"></span>
</div>
<div class="label">
    <span class="label-icon fa fa-paw"></span>
    <span class="label-title">Cats</span>
    <span class="fa.fa-times label-close"></span>
</div>

Sass

.label {
    @include elr-label;
    margin-bottom: 5px;
    margin-right: 10px;
}

JavaScript

$('.label-close').on('click', function() {
    $(this).parent('.label').fadeOut(300, function() {
        $(this).remove()
    });
});

Context Labels

These labels contain some type of context that lets the user know that they should take action.

These are ideal when you want to give the user a nudge to complete an action or warn them of a potentially destructive action like deleting content.

Information
Danger
Warning
Success
Muted

HTML

<div class="label label-info">
    <span class="label-title">Information</span>
</div>
<div class="label label-danger">
    <span class="label-title">Danger</span>
</div>
<div class="label label-warning">
    <span class="label-title">Warning</span>
</div>
<div class="label label-success">
    <span class="label-title">Success</span>
</div>
<div class="label label-muted">
    <span class="label-title">Muted</span>
</div>

Sass

.label {
    @include elr-label;
    margin-bottom: 5px;
    margin-right: 10px;
}

.label-info { @include elr-label-context('info'); }
.label-danger { @include elr-label-context('danger'); }
.label-warning { @include elr-label-context('warning'); }
.label-success { @include elr-label-context('success'); }
.label-muted { @include elr-label-context('muted'); }

Corner Labels

These labels should be used to add information or context to content blocks. Ex. New articles or "liked" posts.

Note: Corner labels must be placed in a container with position relative or absolute.

HTML

<div class="corner-label-box">
    <div class="label-corner">
        <div class="label-triangle"></div>
        <span class="label-icon fa fa-heart"></span>
    </div>
</div>
<div class="corner-label-box">
    <button class="label-corner-right">
        <div class="label-triangle"></div>
        <span class="label-icon fa fa-save"></span>
    </div>
</div>
    </button>
<div class="corner-label-box">
    <div class="label-corner-bottom">
        <div class="label-triangle"></div>
        <span class="label-icon fa fa-heart"></span>
    </div>
</div>
<div class="corner-label-box">
    <div class="label-corner-bottom-right">
        <div class="label-triangle"></div>
        <span class="label-icon fa fa-save"></span>
    </div>
</div>

Sass

.label-corner { @include elr-label-corner(top, left, $accent-color); }
.label-corner-right { @include elr-label-corner(top, right, $success-color); }
.label-corner-bottom { @include elr-label-corner(bottom, left, $link-color); }
.label-corner-bottom-right { @include elr-label-corner(bottom, right, $success-color); }

.corner-label-box {
    @include elr-square(250px);
    background-color: $light-grey;
    position: relative;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;

    &:nth-child(3) {
        clear: left;
    }
}

Ribbon Labels

These labels should be used to add information or context to content blocks. Ex. New articles or "liked" posts.

Note: Corner labels must be placed in a container with position relative or absolute.

New Article!

HTML

<div class="corner-label-box">
    <div class="label-ribbon">
        <span class="label-title">New Article!</span>
    </div>
</div>

Sass

.label-ribbon {
    @include elr-label-ribbon;
}