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

Standard label styles including big size and gold tier state variants

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

Example #3

Indicator label styles including live and new variants

@include oLabels($opts: ('indicators': ('status': ('live', 'new')));

Example #4

Indicator label styles with inverse modifier class

@include oLabels($opts: ('indicators': ('status': ('live', 'new'), 'inverse': true));

Example #5

Timestamp label with inverse modifier class

@include oLabels($opts: ('timestamp': ('inverse': true));

Links

oLabelsAddState(state-name, opts)

Add a state modifier for standard labels. Note this mixin is dor standard labels only, not indicator labels.

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

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

Examples

Example #1

Existing standard label state

@include oLabelsAddState('tier-gold');

Example #2

Custom standard label state

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

Links

oLabelsContent(opts)

Styles for a standard label without an o-labels 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': oColorsByName('lemon')
		)
	));
}

Links

oLabelsTimestampContent

Styles for a timestamp label i.e. .o-labels-timestamp. This mixin is not recommend. Instead the the oLabels primary mixin and o-labels markup. This should only be used where using o-labels markup is not possible.

If outputting a timestamp in a non-label context see o-editorial-typography.

Example

a timestamp label with custom markup.

.my-timestamp-label {
    @include oLabelsTimestampContent();
}

Links

oLabelsIndicatorContent(ops)

Styles for indicator label elements e.g. .o-labels-indicator. This mixin is not recommend. Instead the the oLabels primary mixin and o-labels markup. This should only be used where using o-labels markup is not possible.

parameter type default description
ops the BEM element to output styles for, see example.

Example

indicator labels with custom markup.

.my-indicator-label {
    @include oLabelsIndicatorContent($opts: ('block': true));
}
.my-indicator-label--new {
    @include oLabelsIndicatorContent($opts: ('block': true, 'modifier': 'new'));
}
.my-indicator-label--updated {
    @include oLabelsIndicatorContent($opts: ('block': true, 'modifier': 'updated'));
}
.my-indicator-label--closed {
    @include oLabelsIndicatorContent($opts: ('block': true, 'modifier': 'closed'));
}
.my-indicator-label--live {
    @include oLabelsIndicatorContent($opts: ('block': true, 'modifier': 'live'));
}
.my-indicator-label__status {
    @include oLabelsIndicatorContent($opts: ('element': 'status'));
}
.my-indicator-label__timestamp {
    @include oLabelsIndicatorContent($opts: ('element': 'timestamp'));
}

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

Standard label styles including big size and gold tier state variants

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

Example #3

Indicator label styles including live and new variants

@include oLabels($opts: ('indicators': ('status': ('live', 'new')));

Example #4

Indicator label styles with inverse modifier class

@include oLabels($opts: ('indicators': ('status': ('live', 'new'), 'inverse': true));

Example #5

Timestamp label with inverse modifier class

@include oLabels($opts: ('timestamp': ('inverse': true));

Links

Support Status
active
Switch component view

GitHub Repository

Install o-labels

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

If running a Manual Build, run bower install --save "o-labels@^5.1.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: #origami-support
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: #origami-support
Email: origami.support@ft.com