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

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"
} %>

Passing extra symbols (preview)

In some cases, we want to communicate more than just the flat numeric value eg: 400+, 90%, -20, 1M etc. 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 link (preview)

23 Ministerial departments

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

With link but no label (preview)

Numbers that are links are underlined unless a label is provided, in which case the label is given the underline.

<%= render "govuk_publishing_components/components/big_number", {
  number: 23,
  href: "/government/organisations#ministerial_departments"
} %>

With data attributes (preview)

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

Note that the component does not include built in tracking. If this is required consider using the track click script.

23 Ministerial departments

<%= render "govuk_publishing_components/components/big_number", {
  number: 23,
  label: "Ministerial departments",
  href: "/government/organisations#ministerial_departments",
  data_attributes: {
    "track-category": "homepageClicked",
    "track-action": "departmentsLink",
    "track-label": "/government/organisations#ministerial_departments",
    "track-dimension": "23 Ministerial departments",
    "track-dimension-index": 29
  }
} %>

With data attributes but no link (preview)

23 Ministerial departments

<%= render "govuk_publishing_components/components/big_number", {
  number: 23,
  label: "Ministerial departments",
  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
} %>