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>

Content States

States used to differentiate between types of content.

<span class="o-labels o-labels--content-commercial">Commercial</span>
	<span class="o-labels o-labels--content-commercial">Paid Post</span>
	<span class="o-labels o-labels--content-commercial">Promoted Content</span>
	<span class="o-labels o-labels--content-premium">Premium</span>

Lifecycle States

States used to represent stages in the product lifecycle.

<span class="o-labels o-labels--lifecycle-beta">Beta</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.2.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"@"^4.2.1"

For more information see the Origami build process.