Origami Frontend Components & Services

Demos: o-labels


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>


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

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

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

    This is a <span class="o-labels o-labels--small">Small Label</span> inside a
active Origami v1
Switch component view

GitHub Repository

Install o-labels

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

If running a Manual Build, run npm install "o-labels@^4.2.2".

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