This version of this component hasn't been branded yet.

Please check the latest version, 3.0.2, as branding is a relatively new addition to our components.

o-labels

Label styling

active

States

<span class="o-labels">Label</span>
<span class="o-labels o-labels--active">Active</span>
<span class="o-labels o-labels--error">Error</span>
<span class="o-labels o-labels--pending">Pending</span>
<span class="o-labels o-labels--live">Live</span>
<span class="o-labels o-labels--closed">Closed</span>
<span class="o-labels o-labels--premium">Premium</span>
<span class="o-labels o-labels--brand">Brand</span>
<span class="o-labels o-labels--commercial-content">Commercial Content</span>

Typography

use with o-typography

<p class="demo-paragraph">
Inline text, <span class="o-labels">label</span>, more text
</p>
Bower Dependencies
o-colors ^4.0.1
o-typography ^5.0.1
GitHub Repository

Quickstart

Build Service

Add the following to your <link> tag

o-labels@^3.0.0

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-labels"@"^3.0.0"

For more information see the Origami build process.