Stats
📖 Overview
The Stats block displays a collection of statistics in a responsive grid layout. Each stat can be displayed as either a text-based statistic (with optional prefix/suffix) or as an image. This block is ideal for showcasing key metrics, achievements, or visual highlights.
✏️ Content Options
Statistics are managed via a repeater field. Use the “Add Row” button to add as many stats as needed.
| Field | Type | Required | Description |
|---|---|---|---|
| Type | Select | No | Choose whether to display a text stat or an image. Options: Text (default), Image |
| Stat Prefix | Text | No | Text to appear before the stat value (e.g. £, $). Only visible when Type is “Text” |
| Stat | Text | No | The main statistic value (e.g. 100, 5M). Only visible when Type is “Text” |
| Stat Suffix | Text | No | Text to appear after the stat value (e.g. %, +). Only visible when Type is “Text” |
| Heading | Text | No | The heading/title for this stat. Only visible when Type is “Text” |
| Description | Textarea | No | Additional description text for this stat. Only visible when Type is “Text” |
| Image | Image | No | Select an image to display. Only visible when Type is “Image” |
⚙️ Settings Options
| Setting | Type | Default | Description |
|---|---|---|---|
| Layout | Select | 3 Columns | Select the number of columns for the stats grid. Options: 1 Column, 2 Columns, or 3 Columns |
🎨 CSS Variables
The following CSS variables can be configured to customise the block’s appearance:
Block Variables
| Variable | Default Value |
|---|---|
--block-stats-columns |
1 (adjusted responsively based on layout setting) |
--block-stats-gap |
var(--spacing-xs) |
Component Variables (Individual Stat)
| Variable | Default Value |
|---|---|
--component-stat-gap |
var(--spacing-xxxs) |
--component-stat-border |
var(--component-stat-border-width) solid var(--component-stat-border-colour) |
--component-stat-border-colour |
var(--colour-black) |
--component-stat-border-width |
1px |
--component-stat-border-radius |
0 |
--component-stat-padding |
var(--spacing-s) |
--component-stat-image-max-width |
120px |
--component-stat-image-border |
var(--component-stat-image-border-width) solid var(--component-stat-image-border-colour) |
--component-stat-image-border-colour |
var(--colour-black) |
--component-stat-image-border-width |
0 |
--component-stat-image-border-radius |
0 |
--component-stat-image-padding |
0 |
--component-stat-stat-gap |
0.05em |
--component-stat-stat-prefix-size |
var(--font-size-stat) |
--component-stat-stat-value-size |
var(--font-size-stat) |
--component-stat-stat-suffix-size |
var(--font-size-stat) |
--component-stat-stat-value-colour |
var(--colour-brand-1) |
♿ Accessibility
- Uses semantic HTML elements (
<p>for stat values,<h3>for headings) - All text content is properly escaped for security
- Images include proper alt text via WordPress attachment metadata
- Responsive grid layout adapts to different screen sizes for optimal readability
£ 100
Short heading goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
100 +
Useful things
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
800m
Things to boast
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
£ 100
Short heading goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
100 +
Useful things
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
800m
Things to boast
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
10 %
Something something
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
£ 100
Short heading goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
10 %
Something something
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
£ 100
Short heading goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
100 +
Useful things
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
800m
Things to boast
Lorem ipsum dolor sit amet, consectetur adipiscing elit.