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.


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


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>


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();


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


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

Switch component view

GitHub: o-big-number@3.1.2

Install o-big-number

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

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-big-number@^3.1.2".

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