Examples

Getting started. What do we need? A message that is notice. For example:

Please use this Collegiate Licensing Company search function to quickly help you find your licensed product. The above pdf files will also assist in this process.

<h4 class="small label pad-tight" data-context="warning">
Please use this <a href="http://www.clc.com/Licensing-Info/Client-License-List.aspx">Collegiate Licensing Company search function</a> to quickly help you find your licensed product. The above pdf files will also assist in this process.
</h4>

Below are different ways to highlight what is needed.

Triggering a label

There are 2 ways to trigger a label, using a class which will tell the system to treat this classed element as a label it’s self, or using the data attributes to trigger an appending/pre-pending of the label.

<span class="label label-default">New label</span>
<h1 data-label-before="New label" data-context="default">H1 Example heading</h1>

Via class

Set the content of the label

class="label"

Set the context of the label

class="label-default" (note: technically using default is redundant but useful to reset or over power maybe)
class="label-primary"
class="label-success"
class="label-info"
class="label-warning"
class="label-danger"

Via data attributes

Set the content and placement of the label

data-label-after="new after"
data-label-before="new before"

Set the context of the label

data-context="default" (note: again probably redundant to use)
data-context="primary"
data-context="success"
data-context="info"
data-context="warning"
data-context="danger"

Putting it to practice Basic Ideas

H1 Example heading New

H2 Example heading New

H3 Example heading New

H4 Example heading New

H5 Example heading New

H6 Example heading New

<h3>Example heading <span class="label label-default">New</span></h3>

Example after

H1 Example heading

H2 Example heading

H3 Example heading

H4 Example heading

H5 Example heading

H6 Example heading

<h3 data-label-after="new">Example heading</h3>

Example before

H1 Example heading

H2 Example heading

H3 Example heading

H4 Example heading

H5 Example heading

H6 Example heading

<h3 data-label-before="new">Example heading</h3>

Available variations

Add any of the below mentioned modifier classes to change the appearance of a label.

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>

Have tons of labels?

Default
span as Primary data-context="primary"
span as Success data-context="success"
span as Info data-context="info"
span as Warning data-context="warning"
span as Danger data-context="danger"

Example before

H1 Example heading

H2 Example heading

H3 Example heading

H4 Example heading

H5 Example heading

H6 Example heading

<h3 data-context="primary" data-label-before="new">Example heading</h3>