Origami Frontend Components & Services

SassDoc: o-labels

oLabels(opts)

Outputs all available features and styles for labels.

The output includes the .o-labels class definition as well as class definitions for every variant.

parameter type default description
opts (optional) 'sizes': ('big', 'small'), 'states': ( ... ) Label options including sizes and states to output styles for.

Examples

Example #1

All label styles

@include oLabels();

Example #2

Base styles, big size variant, and gold tier state variant

@include oLabels($opts: ('sizes': ('big'), 'states': ('tier-gold'));

Links

oLabelsAddState(state-name, opts)

Add a state modifier for labels.

The output includes the .o-labels--STATE modifier class definition, which includes all overrides.

parameter type default description
state-name The label state to output styles for. See README for available states.
opts (optional) null A brand configuration which can be used to create custom label states. See README for more examples.

Examples

Example #1

Existing label state

@include oLabelsAddState('tier-gold');

Example #2

Custom label state

@include oLabelsAddState('citrus-fruit', (
    background-color: oColorsGetPaletteColor('lemon')
));

Links

o-labels-is-silent

Silent mode: on (true) or off (false) Set to false to output default label classes

Links

oLabels(opts)

Outputs all available features and styles for labels.

The output includes the .o-labels class definition as well as class definitions for every variant.

parameter type default description
opts (optional) 'sizes': ('big', 'small'), 'states': ( ... ) Label options including sizes and states to output styles for.

Examples

Example #1

All label styles

@include oLabels();

Example #2

Base styles, big size variant, and gold tier state variant

@include oLabels($opts: ('sizes': ('big'), 'states': ('tier-gold'));

Links

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