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

No results found matching your criteria

Title

Title

Title

Title

Title

Title

Stats

📖 Overview

✏️ Content Options

⚙️ Settings Options

🎨 CSS Variables

Block Variables

Component Variables (Individual Stat)

♿ Accessibility

Short heading goes here

Useful things

Things to boast

Short heading goes here

Useful things

Things to boast

Something something

Short heading goes here

Something something

Short heading goes here

Useful things

Things to boast