Component

Big number

A big number, with a label if needed, for visualising quantitative values such as the number of government departments or historical prime ministers.

This component requires at least a non-falsey number attribute value passed to it, otherwise it will not render.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

119

How to call this component

<%= render "govuk_publishing_components/components/big_number", {
  number: 119
} %>

Accessibility acceptance criteria

This component must:

  • communicate number value and label (if present) in a single dictation when read with a screen reader
  • convey the meaning of the number shown

Links in the component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • indicate when they have focus
  • change in appearance when touched (in the touch-down state)
  • change in appearance when hovered
  • be usable with touch
  • be usable with voice commands
  • have visible text
  • have meaningful text

Other examples

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

  • id - accepts a string for the element ID attribute
  • data_attributes - accepts a hash of data attributes
  • aria - accepts a hash of aria attributes
  • classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
  • margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale
  • role - accepts a space separated string of roles
  • lang - accepts a language attribute value
  • open - accepts an open attribute value (true or false)
  • hidden - accepts an empty string, ‘hidden’, or ‘until-found’
  • tabindex - accepts an integer. The integer can also be passed as a string
  • dir - accepts ‘rtl’, ‘ltr’, or ‘auto’
  • type - accepts any valid type attribute e.g. ‘button’, ‘submit’, ‘text’
  • rel - accepts any valid rel attribute e.g. ‘nofollow’
  • target - accepts a valid target attribute e.g. ‘_blank’
  • title - accepts any string
  • draggable - accepts a draggable attribute value (“true” or “false”)

With labels (preview)

Labels for numbers are given inline styling but stacked using pseudo elements with display block. This is to bypass an issue with NVDA where block level elements are dictated separately.

119   Open consultations 
<%= render "govuk_publishing_components/components/big_number", {
  number: 119,
  label: "Open consultations"
} %>

With plus symbol (preview)

In some cases, we want to communicate more than just the flat numeric value eg: 400+. This is why we allow values to be passed as flat strings.

400+   Other agencies and public bodies 
<%= render "govuk_publishing_components/components/big_number", {
  number: "400+",
  label: "Other agencies and public bodies"
} %>

With percentage symbol (preview)

In some cases, we want to communicate more than just the flat numeric value eg: 90%. This is why we allow values to be passed as flat strings.

90%   is a large percentage of something 
<%= render "govuk_publishing_components/components/big_number", {
  number: "90%",
  label: "is a large percentage of something"
} %>

With negative symbol (preview)

In some cases, we want to communicate more than just the flat numeric value eg: -20. This is why we allow values to be passed as flat strings.

-20   is a negative number 
<%= render "govuk_publishing_components/components/big_number", {
  number: "-20",
  label: "is a negative number"
} %>

With unit symbol (preview)

In some cases, we want to communicate more than just the flat numeric value eg: 1M. This is why we allow values to be passed as flat strings.

1M   is a shorter way of saying one million 
<%= render "govuk_publishing_components/components/big_number", {
  number: "1M",
  label: "is a shorter way of saying one million"
} %>

With nested data attributes (preview)

If a href attribute is present, nested_data_attributes will apply to the a containing the number value (see below). If a href is not present, it will apply to the span containing the number value.

For parent level data attributes, use data_attributes which comes from this component having the component wrapper.

Note that the component does not include built in tracking. If this is required consider using the GA4 link tracker.

<%= render "govuk_publishing_components/components/big_number", {
  number: 23,
  label: "Ministerial departments",
  href: "/government/organisations#ministerial_departments",
  nested_data_attributes: {
    "department-count": true
  }
} %>

With aria attributes (preview)

Aria attributes are applied to the whole component instance

<%= render "govuk_publishing_components/components/big_number", {
  number: 23,
  label: "Ministerial departments",
  aria: {
    hidden: true
  }
} %>

With bottom margin (preview)

The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale. The default big number margin bottom is 15px (govuk-spacing(3)).

119   Open consultations 
<%= render "govuk_publishing_components/components/big_number", {
  number: 119,
  label: "Open consultations",
  margin_bottom: 9
} %>