Origami Frontend Components & Services

Demos: o-labels

This version of o-labels hasn't been branded yet. Please check the latest version, 5.0.0, as branding is a relatively new addition to our components.


<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>


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


use with o-typography

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


Label for use when a feature is in beta

<span class="o-labels o-labels--beta o-labels--wide">Beta</span>
Switch component view

GitHub Repository

Install o-labels

If using the Build Service, add o-labels@^3.1.1 to your link tag.

If running a Manual Build, run bower install --save "o-labels@^3.1.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