Origami Frontend Components & Services

Readme: o-labels active

Labels for content classification or to emphasise a value.

Usage

Markup

The most minimal markup for a label is as follows:

<span class="o-labels">Label</span>

Labels are displayed inline so including the above markup in a paragraph, for example, will make it sit alongside the text.

There are several size modifier classes which can be used to change the general appearance of a label:

<span class="o-labels o-labels--big">Big Label</span>
<span class="o-labels o-labels--small">Small Label</span>

Labels can also have one of several states. The available states depend on which brand you are using (there are no states for whitelabel branded components):

Masterbrand

The following states are used to categorise content, mostly on FT.com:

<span class="o-labels o-labels--content-commercial">Paid Post</span> (used for paid post and promoted content)
<span class="o-labels o-labels--content-premium">Premium</span> (used for premium-only content)

The following state is used to indicate that a feature is in a beta state:

<span class="o-labels o-labels--lifecycle-beta">Beta</span>

Internal

The following states are 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>

The following states are used to represent the FT's service tiers:

<span class="o-labels o-labels--support-platinum">Platinum</span>
<span class="o-labels o-labels--support-gold">Gold</span>
<span class="o-labels o-labels--support-silver">Silver</span>
<span class="o-labels o-labels--support-bronze">Bronze</span>

Sass

Silent mode

As with all Origami components, o-labels has a silent mode. To use its compiled CSS (rather than incorporating its mixins into your own Sass) set $o-labels-is-silent: false; in your Sass before you import the o-labels Sass:

$o-labels-is-silent: false;
@import 'o-labels/main';

Mixin: oLabels

If using o-labels in silent mode, you'll need to use the mixins outlined here to output styles.

The oLabels mixin is used to output base styles as well as styles for all of the label sizes and states. This output includes the o-labels classes:

@include oLabels();
.o-labels {
    /* styles */
}
.o-labels--big {
    /* styles */
}
/* etc. */

If you wish to specify a subset of sizes and states to output styles for, you can pass in options (see sizes and states for available options):

@include oLabels($opts: (
    $sizes: ('big'),
    $states: (
        'content-commercial',
        'content-premium'
    )
));

Mixin: oLabelsAddState

The oLabelsAddState mixin can be used to output a class for one of the label states, outlined in the states table:

@include oLabelsAddState('content-commercial');
.o-labels--content-commercial {
    /* styles */
}

The oLabelsAddState mixin also accepts optional custom configurations, which override defaults or allow you to define your own label states:

@include oLabelsAddState('citrus-fruit', (
    background-color: oColorsGetPaletteColor('lemon')
));
.o-labels--citrus-fruit {
    /* styles */
}

Sizes

This table outlines all of the possible sizes you can request in the oLabels mixin:

Size Description Brand support
big Label with increased font size and padding. master, internal, whitelabel
small Label with decreased font size and padding. master, internal, whitelabel

States

This table outlines all of the possible states you can request in the oLabels mixin and oLabelsAddState mixin:

Size Description Brand support
content-commercial Used to identify paid posts or promoted content. master
content-premium Used to identify premium content. master
lifecycle-beta Used to identify a feature that's in beta. master
support-active Used to indicate that a component is actively maintained. internal
support-maintained Used to indicate that a component is maintained. internal
support-experimental Used to indicate that a component is an experimental feature. internal
support-deprecated Used to indicate that a component is deprecated. internal
support-dead Used to indicate that a component is no longer worked on. internal
tier-platinum Used to indicate a service with a platinum service tier. internal
tier-gold Used to indicate a service with a gold service tier. internal
tier-silver Used to indicate a service with a silver service tier. internal
tier-bronze Used to indicate a service with a bronze service tier. internal

Migration guide

State Major Version Last Minor Release Migration guide
✨ active 4 N/A migrate to v4
⚠ maintained 3 3.1.1 migrate to v3
╳ deprecated 2 2.1.0 N/A
╳ deprecated 1 1.0.6 N/A

Contact

If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.

Licence

This software is published by the Financial Times under the MIT licence.

Switch component view

GitHub Repository

Install o-labels

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

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