This component hasn't been branded yet.

If you would like to discuss having it branded please get in touch with the Origami team.

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>

Sizes

<span class="o-labels">Label</span>
<span class="o-labels o-labels--big">Big</span>
<span class="o-labels o-labels--wide">Wide</span>

Typography

use with o-typography

<p class="demo-paragraph">
Inline text, <span class="o-labels">label</span>, more text
</p>

Beta

Label for use when a feature is in beta

<span class="o-labels o-labels--beta o-labels--wide">Beta</span>
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.1.1

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.1.1"

For more information see the Origami build process.