Readme: o-labels

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 */
}

Mixin: oLabelsContent

When it's not possible to use an o-labels CSS class, for example within another Origami component, use oLabelsContent to output a label with a custom class.

If it is possible to use o-labels classes we recommend oLabels and oLabelsAddStates instead. Using these will help reduce the size of your CSS bundle where mutliple labels are used.

oLabelsContent accepts an $opts argument which is a map of options. To output styles required by all labels set "base" to "true". Then set the labels "sizes" and its "state". Any of these options may be output independently.

To output an existing label:

.o-example-my-label {
    @include oLabelsContent($opts: (
        'base': true,
        'size': 'big',
        'state': 'tier-gold'
    ));
}

To output a custom label:

.o-example-my-custom-label {
    @include oLabelsContent($opts: (
        'base': true,
        'size': 'big',
        'state': (
            'background-color': oColorsGetPaletteColor('lemon')
        )
    ));
}

Sizes

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

States

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

Migration guide

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.