The signature moment
The numbers stand on the photograph's floor
The cover takes its height from its content: the heading at the top, then a stretch of open photograph from 10rem to 28rem (24vw), then the strip, with only the cover's bottom padding beneath it. So the strip stands on the cover's floor at every width by construction, not by alignment. The strip opens on a hairline rule and each figure runs from 48px to 88px over a small label, so the section reads as a claim above, a picture, and the evidence standing on the ground beneath it.
Theme handoff
What comes from where
Theme and pattern
Inherits: every colour (veil contrast, type base, the rule role-rule falling to base), the typeface, the spacing scale. Decides: the veil's opacity, the open stretch of photograph, the 34rem measure of the copy, the figure size and the strip's grid. The heading is an h2 off the theme's ladder, a display clamp() from 44px to 104px, because on a full-bleed photograph its size IS the composition; a ladder rung reads timid at 1920. The figures are paragraphs at a display clamp() for the same reason.
The strip is a grid with a 15rem minimum column: four across at 1280 and up, two by two at 820, one column at 390.
Why not a flex stack with space-between at a fixed height: core gives a minimumColumnWidth grid container-type: inline-size, and inside a vertical flex stack that grid's block is sized far taller than its content (measured 1276px around a 117px grid at 1920), which swallows the space meant to open between heading and figures. Flow layout sizes the grid honestly.
Full pattern notes
Why it works, and how it is built
Open a topic for the complete design reasoning, editing guidance and implementation notes.
Design rationaleComposition, intent and nearest alternatives
Overview
A tall full-bleed core/cover for a set of figures. The heading and one line of copy sit high in the frame, a long run of photograph fills the middle, and four numbers stand in a ruled strip along the cover's bottom edge.
The signature moment: the numbers stand on the photograph's floor
The cover takes its height from its content: the heading at the top, then a stretch of open photograph from 10rem to 28rem (24vw), then the strip, with only the cover's bottom padding beneath it. So the strip stands on the cover's floor at every width by construction, not by alignment. The strip opens on a hairline rule and each figure runs from 48px to 88px over a small label, so the section reads as a claim above, a picture, and the evidence standing on the ground beneath it.
Make it yoursVariations and the edits to make first
Variations
- Numbers on the ceiling: the strip runs along the top of the cover over its rule, and the heading lands on the floor, for a page that leads with the evidence.
Theme behaviourInheritance, fixed decisions and contrast
What it inherits, what it decides
Inherits: every colour (veil contrast, type base, the rule role-rule falling to base), the typeface, the spacing scale. Decides: the veil's opacity, the open stretch of photograph, the 34rem measure of the copy, the figure size and the strip's grid. The heading is an h2 off the theme's ladder, a display clamp() from 44px to 104px, because on a full-bleed photograph its size IS the composition; a ladder rung reads timid at 1920. The figures are paragraphs at a display clamp() for the same reason.
The strip is a grid with a 15rem minimum column: four across at 1280 and up, two by two at 820, one column at 390.
Why not a flex stack with space-between at a fixed height: core gives a minimumColumnWidth grid container-type: inline-size, and inside a vertical flex stack that grid's block is sized far taller than its content (measured 1276px around a 117px grid at 1920), which swallows the space meant to open between heading and figures. Flow layout sizes the grid honestly.
Technical notesBlock mechanics, responsive behaviour and constraints
Why type on a photograph is permitted here
The veil is contrast at dimRatio 80 and every word is base, so the lightest ground any text can land on is the veil over a white photograph, which still passes 4.5:1 in the stock themes. Lower the veil below 80 and that stops being guaranteed.
What a buyer changes first
The photograph (select the cover, choose Replace), then the figures. Keep each figure to about six characters so four fit on one row at 1280.
The hand-off row
A short row on your theme's paper under the cover: a tracked label and one paragraph at a 34rem measure. It shows where the cover ends and is the first thing a buyer rewrites or deletes.
Included images
The copied markup includes a WordPress Photo Directory example photograph. The public image URL keeps the example visible after pasting. Select the cover and choose Replace to use your own Media Library file. See image credits for the source and license. Pasting an image URL does not import a Media Library attachment.
The markup
Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks.
Fetching the markup…Variation: Numbers on the ceiling
Fetching the markup…
