# Cover figures

> A display heading, a short lede and a button on your page ground over three tall photographs set side by side across the full width. Each photograph sits under a heavy veil of your contrast colour and carries one enormous figure, a small label above it and a ruled line of explanation below, so the photograph reads as texture behind the number. The three stack into one column on a phone. Includes three replaceable example photographs. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/cover-figures.html
Section: Stats
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: button, buttons, cover, group, heading, paragraph
Keywords: stats, figures, numbers, cover, photo, results, clinic

## Variations (2)

### Three veiled figures (the default)

Identical markup in every theme.

Each photograph under an 80% veil of your contrast with your base as the figure, label and rule; the heading row is on your page ground.

### Porcelain and heather

This variation states its own colours and states its own type: identical in every theme.

A clinic look: a porcelain ground and plum-black ink, plum-black veils under porcelain figures, and a heather eyebrow and pill button, all in Avenir Next.


---

## The signature moment: three figures, each set in its own photograph

Every figure gets a photograph of its own, under an 80% veil of your
`contrast`, so the scene reads as texture behind the number rather than as a
picture beside it. The figure is the largest thing in its frame, a small label
sits above it and a ruled line of explanation below, all at the frame's foot.

## Why type on the photograph is permitted here

At `dimRatio` 80 with a `contrast` veil, `base` type keeps its contrast over
any photograph you choose, white or black. The figures and the heading are
display type, a bare `clamp()`, because their size is the composition; the
explanations are body copy on the `medium` rung, and the rule above each is
`currentColor`, so it follows the type.

## What it inherits, what it decides

Inherits: every colour, the typeface, the spacing scale, the button. Decides:
the veil's opacity, the frame heights (a top padding that grows with the
viewport, so a phone's frames are shorter), the 4px seams between frames, and
the 22rem measure of each explanation. The frames are a grid whose minimum
column is a third of its width from 46rem up and the whole width below it, so
it shows three across or one column, never two with a hole, and every frame in
a row is the same height.

## What a buyer changes first

The three figures and their lines; keep each figure to five characters at this
size. Then the photographs: any scene works under the veil, so choose for
mood, not detail.

## Included images

The copied markup includes WordPress Photo Directory example photographs. The public image URLs
keep the examples visible after pasting. Select an image or cover and choose
**Replace** to use your own Media Library files. See [image credits](/image-credits/)
for the sources and licenses. Pasting an image URL does not import a Media Library
attachment.