Lexicon v1.0.32

Badges, Labels and Stickers

Badges

Badges help highlight important information such as notifications or new and unread messages. Badges have circular borders by default, for rounded borders, See labels.

Default Primary Success Info Warning Danger 
<span class="badge badge-default">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>

Badge Sizes

Use badge-sm and badge-lg to change the badge size.

Normal
Small Badge Default Badge Large Badge 
<span class="badge badge-default badge-sm">Small Badge</span>
<span class="badge badge-primary">Default Badge</span>
<span class="badge badge-lg badge-success">Large Badge</span>
Lexicon Icons
Small Badge Default Badge Large Badge 
<span class="badge badge-default badge-sm">
    Small Badge
    <a href="#1">
        <span aria-label="icon-times" class="lexicon-icon-container" role="img">
            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
                <use xlink:href="../../images/icons/icons.svg#times"></use>
            </svg>
        </span>
    </a>
</span>

<span class="badge badge-primary">
    Default Badge
    <a href="#1">
        <span aria-label="icon-times" class="lexicon-icon-container" role="img">
            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
                <use xlink:href="../../images/icons/icons.svg#times"></use>
            </svg>
        </span>
    </a>
</span>

<span class="badge badge-lg badge-success">
    Large Badge
    <a href="#1">
        <span aria-label="icon-times" class="lexicon-icon-container" role="img">
            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
                <use xlink:href="../../images/icons/icons.svg#times"></use>
            </svg>
        </span>
    </a>
</span>
Glyphicons or Font Awesome
Small Badge Default Badge Large Badge 
<span class="badge badge-default badge-sm">
    Small Badge
    <a href="#1">
        <span aria-hidden="true" class="glyphicon glyphicon-remove"></span>
    </a>
</span>

<span class="badge badge-primary">
    Default Badge
    <a href="#1">
        <span aria-hidden="true" class="glyphicon glyphicon-remove"></span>
    </a>
</span>

<span class="badge badge-lg badge-success">
    Large Badge
    <a href="#1">
        <span aria-hidden="true" class="icon-remove"></span>
    </a>
</span>

Badge Examples

Some badge use cases.

Badges inside Nav Pills

Labels

Use labels to organize groups of items in your application. Labels have rounded borders by default, for circular borders, See badges.

Default Primary Success Info Warning Danger 
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Label Sizes

Use label-sm and label-lg to change the label size.

Small Label Default Label Large Label 
<span class="label label-default label-sm">Small Label</span>
<span class="label label-primary">Default Label</span>
<span class="label label-lg label-success">Large Label</span>
Lexicon Icons
Small Label Default Label Large Label 
<span class="label label-default label-sm">
    Small Label
    <a href="#1">
        <span aria-label="icon-times" class="lexicon-icon-container" role="img">
            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
                <use xlink:href="../../images/icons/icons.svg#times"></use>
            </svg>
        </span>
    </a>
</span>

<span class="label label-primary">
    Default Label
    <a href="#1">
        <span aria-label="icon-times" class="lexicon-icon-container" role="img">
            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
                <use xlink:href="../../images/icons/icons.svg#times"></use>
            </svg>
        </span>
    </a>
</span>

<span class="label label-lg label-success">
    Large Label
    <a href="#1">
        <span aria-label="icon-times" class="lexicon-icon-container" role="img">
            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
                <use xlink:href="../../images/icons/icons.svg#times"></use>
            </svg>
        </span>
    </a>
</span>
Glyphicons or Font Awesome
Small Label Default Label Large Label 
<span class="label label-default label-sm">
    Small Label
    <a href="#1">
        <span aria-hidden="true" class="icon-remove"></span>
    </a>
</span>
<span class="label label-primary">
    Default Label
    <a href="#1">
        <span aria-hidden="true" class="glyphicon glyphicon-remove"></span>
    </a>
</span>
<span class="label label-lg label-success">
    Large Label
    <a href="#1">
        <span aria-hidden="true" class="icon-remove"></span>
    </a>
</span>

Stickers

Stickers are absolutely positioned monospaced badges/labels, place them anywhere relative to your container. It is positioned in the top left corner by default. The positional sticker classes sticker-bottom-left, sticker-top-right, and sticker-bottom-right will position the sticker in each corner.

thumbnail PDF
thumbnail PDF
thumbnail PDF
thumbnail PDF 
<div class="aspect-ratio">
    <img alt="thumbnail" src="thumbnail.jpg">
    <span class="sticker sticker-danger">PDF</span>
</div>

<div class="aspect-ratio">
    <img alt="thumbnail" src="thumbnail.jpg">
    <span class="sticker sticker-bottom-left sticker-danger">PDF</span>
</div>

<div class="aspect-ratio">
    <img alt="thumbnail" src="thumbnail.jpg">
    <span class="sticker sticker-danger sticker-top-right">PDF</span>
</div>

<div class="aspect-ratio">
    <img alt="thumbnail" src="thumbnail.jpg">
    <span class="sticker sticker-bottom-right sticker-danger">PDF</span>
</div>

Sticker Static

sticker-static, if you don't want an absolutely positioned sticker.

133 133 133 133 133 133 
<span class="sticker sticker-default sticker-static">133</span>
<span class="sticker sticker-danger sticker-static">133</span>
<span class="sticker sticker-info sticker-static">133</span>
<span class="sticker sticker-primary sticker-static">133</span>
<span class="sticker sticker-static sticker-success">133</span>
<span class="sticker sticker-static sticker-warning">133</span>

Sticker Sizes

Stickers come in 3 different sizes, small, regular and large. Create your own custom size by changing the width, height, line-height, and font-size. You can also use the sass monospace mixin to change the width and height e.g. @include monospace(30px);.

133 133 133 
<span class="sticker sticker-default sticker-sm sticker-static">133</span>
<span class="sticker sticker-primary sticker-static">133</span>
<span class="sticker sticker-lg sticker-static sticker-success">133</span>

Sticker Shapes

Change the borders with sticker-circle, sticker-rounded, or sticker-square.

133 133 133 
<span class="sticker sticker-circle sticker-default sticker-static">133</span>
<span class="sticker sticker-primary sticker-rounded sticker-static">133</span>
<span class="sticker sticker-square sticker-static sticker-success">133</span>

Add class sticker-outside in conjunction with sticker positions to position the sticker on the outside corners.

<span class="sticker sticker-danger sticker-outside sticker-sm">PDF</span>
<span class="sticker sticker-bottom sticker-danger sticker-outside sticker-sm">PDF</span>
<span class="sticker sticker-danger sticker-outside sticker-right sticker-sm">PDF</span>
<span class="sticker sticker-bottom sticker-danger sticker-outside sticker-right sticker-sm">PDF</span>