The signature moment
The years run down the photograph
The years are not a list under the headline; they are a rail laid on the picture. A two-pixel vertical rule runs the height of the cover, and at every year a hairline branches off it, so each date hangs from the spine like a station on a line. The year figures are large, the event lines small, and the heavy stack on the right answers a single heavy headline low on the left. It is structure, not decoration, and it holds in greyscale.
Theme handoff
What comes from where
Theme and pattern
Inherits: every colour (veil contrast, type and rules base), the typeface, the spacing scale. Decides: the veil's opacity, the type ramp, the measures, the column split. The cover states its own text colour chain so core's white cover text rule never applies.
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 full-bleed core/cover that carries a whole history: a heavy veil of your theme's contrast colour over the photograph, a display headline in the lower left, and a rail of six years running down the right side of the cover.
The signature moment: the years run down the photograph
The years are not a list under the headline; they are a rail laid on the picture. A two-pixel vertical rule runs the height of the cover, and at every year a hairline branches off it, so each date hangs from the spine like a station on a line. The year figures are large, the event lines small, and the heavy stack on the right answers a single heavy headline low on the left. It is structure, not decoration, and it holds in greyscale.
Make it yoursVariations and the edits to make first
Variations
- Paper veil: the veil is
baseat 80% and every word and rulecontrast, the photograph a pale ghost behind ink.
Theme behaviourInheritance, fixed decisions and contrast
What it inherits, what it decides
Inherits: every colour (veil contrast, type and rules base), the typeface, the spacing scale. Decides: the veil's opacity, the type ramp, the measures, the column split. The cover states its own text colour chain so core's white cover text rule never applies.
Technical notesBlock mechanics, responsive behaviour and constraints
Type on the photograph
Type sits on the image only because the veil makes the ground a known quantity: contrast at dimRatio 80 under base type. The event lines are body size, so they need the full 4.5:1, not the 3:1 allowed to large display type; the checker composites the veil over a white and a black photograph and the worse ground has to pass. Lower the veil below 80 and that stops being true.
Type and hierarchy
- The headline is display: a bare
clamp(2.75rem, 6.5vw, 8.5rem), off the theme's ladder, because its size is the composition; at 1920 it is 136px, held to aclamp(18rem, 42vw, 46rem)measure so it breaks into a block. - The year figures are paragraphs at a bare
clamp(2.25rem, 4.6vw, 6rem), line-height 1: they are labels whose size is the rail, not headings. - Event lines and the standfirst are body copy on
medium; "Our history" is a label with its ownclamp()floored at 15px. - Hierarchy comes from size and the rules alone: nothing is set in capitals.
- The heading states its size and colour chain and nothing else.
Layout
- The cover's height comes from the rail: six entries set it, never
vh. - The inside is a two-column
core/columns, 56% and 44%, both columns bottom-aligned, so the headline sits at the foot while the rail fills the height. Below 782px the columns stack and the rail drops beneath the headline. - The rail is a vertical flex group with a left border; each entry is a group with a top border starting at that border. Rules are
currentColor, always the colour of the type. - Gaps are spacing presets; side padding on the inner groups is zero.
What a buyer changes first
The photograph: choose Replace on the cover. Then the headline and the six entries; duplicate or delete an entry group to change the count. The last entry has no bottom padding, so the rail ends on its event line.
The hand-off row
A short row on your theme's paper under the cover, a label and one paragraph at a 34rem measure, so the cover reads as a section and shows where it ends.
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: Paper veil
Fetching the markup…