Origami Frontend Components & Services

Demos: o-labels

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>
Switch component view

GitHub Repository

Install o-labels

If using the Build Service, add o-labels@^4.0.1 to your link tag. Ensure the correct brand is set with a query parameter &brand=internal.

If running a Manual Build, run bower install --save "o-labels@^4.0.1".

Help & Support

o-labels is maintained directly by the Origami team. If you have any questions about o-labels or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com