@financial-times/o-big-number

o-big-number

Typographical styles to highlight and describe a big number. Positioning of the big number, for example to the left in a style of a pull-quote, is left to the user. This is so o-big-number may be used in different contexts without writing extra CSS to remove existing positioning.

• Usage
• Markup
• Sass
• Migration
• Licence

Usage

Check out how to include Origami components in your project to get started with o-big-number.

Markup

A big number has two parts. The big number itself and copy to describe the big number.

<div class="o-big-number">
	<div class="o-big-number__title">&pound;350m</div>
	<div class="o-big-number__content">Cost of the rights expected to increase by one-third — or about £350m a year — although some anticipate inflation of up to 70%</div>
</div>

Sass

To output CSS for o-big-number make a single call to the primary mixin oBigNumber.

// outputs .o-big-number, o-big-number__title, etc
@include oBigNumber();

We recommend you use oBigNumber and default o-big-number classes, however if you are unable to update your markup use the mixins oBigNumberTitle and oBigNumberContent:

.my-big-number-title {
    @include oBigNumberTitle();
}

.my-big-number-content {
    @include oBigNumberContent();
}

Migration

State	Major Version	Last Minor Release	Migration guide
✨ active	3	N/A	migrate to v3
⚠ maintained	2	2.0	migrate to v2
╳ deprecated	1	1.1	N/A

Licence

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