Origami Frontend Components & Services

Readme: 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.


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 2 N/A migrate to v2
╳ deprecated 1 1.1 N/A
Support Status
maintained
Switch component view

GitHub Repository

Install o-big-number

If using the Build Service, add o-big-number@^2.0.3 to your link tag.

If running a Manual Build, run bower install --save "o-big-number@^2.0.3".

Help & Support

o-big-number is maintained directly by the Origami team. If you have any questions about o-big-number 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