o-labels

Labels for content classification or to emphasise a value

active

Sizes

Label size modifiers are used to change the prominence of labels.

<span class="o-labels">Standard Label</span>

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

<span class="o-labels o-labels--small">Small Label</span>

Service Tier States

States used to represent the different service support tiers.

<span class="o-labels o-labels--tier-platinum">Platinum</span>
	<span class="o-labels o-labels--tier-gold">Gold</span>
	<span class="o-labels o-labels--tier-silver">Silver</span>
	<span class="o-labels o-labels--tier-bronze">Bronze</span>

Support Status States

States used to represent the different support levels of Origami components.

<span class="o-labels o-labels--support-active">Active</span>
	<span class="o-labels o-labels--support-maintained">Maintained</span>
	<span class="o-labels o-labels--support-experimental">Experimental</span>
	<span class="o-labels o-labels--support-deprecated">Deprecated</span>
	<span class="o-labels o-labels--support-dead">Dead</span>

Typography

Labels sitting in line with text that's styled with o-typography.

<div class="o-typography-wrapper">

	<p>
		This is a <span class="o-labels">Standard Label</span> inside a paragraph.
	</p>

	<p>
		This is a <span class="o-labels o-labels--big">Big Label</span> inside a paragraph.
	</p>

	<p>
		This is a <span class="o-labels o-labels--small">Small Label</span> inside a paragraph.
	</p>

</div>
Bower Dependencies
o-colors ^4.7.2
o-typography ^5.7.7
o-brand ^3.1.1
GitHub Repository

Quickstart

Build Service

Add the following to your <link> tag

o-labels@^4.0.1&brand=internal

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"@"^4.0.1"

For more information see the Origami build process.