Origami Frontend Components & Services

Demos: o-labels active

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

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