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

oLabelsContent(opts)

Styles for a label without an o-loading CSS class. Recommended only when a custom class name is required, for example within another component.

Styles for a label without a CSS selector.

parameter type default description
opts A map containing a boolean to output base label styles, plus the label size and state (a state name or custom state map).

Examples

Example #1

existing label.

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

Example #2

custom label.

.o-example-my-custom-label {
	@include oLabelsContent($opts: (
		'base': true,
		'size': 'big',
		'state': (
			'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.2.4 to your link tag.

If running a Manual Build, run bower install --save "o-labels@^4.2.4".

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