Statistics: how to use

Each statistics band is a full-bleed Row with one variant class in Advanced › CSS Classes. The class is the Figma background plus icon colour: stats-white-orange, stats-white-blue, stats-white-slate, stats-light-slate-orange, stats-light-slate-blue, stats-light-slate-slate. Inside the Row is a Column Group with one column per statistic. Each column holds a Container (icon beside text on desktop, stacked on phones) with an Image (the icon) and an inner Container holding a Heading (the number) and a Text (the label). Copy the whole row onto your page, then change the numbers, labels and icons.

How many statistics

• Four columns is the Figma default. Up to 990 px (the Figma SM viewport) four statistics show as a 2 × 2 grid.
• Three (or fewer) columns also work: up to 990 px they stack in one column. Remove a column in Page Builder and the others spread out.

What to ask your designer for

• Icon: one PNG per statistic, 400 × 400 px, transparent background, white line artwork filling roughly the middle two thirds. Name it stat-icon-<name>-400.png. The coloured circle behind it comes from the theme.
• Reference icons in media/wysiwyg/components/statistics/: fleet, depots, engineers, support.