Pattern Paste
Subscribe

Core Patterns Cover

Catalogue accessStandard

Cover cascade

Three photographs of different sizes and shapes dealt across the page like prints on a table, each lapping the one before it down and across, edged in a thin mat of your theme's base colour, beside a display heading, lede and button on your page ground.

On a phone the prints stack under the copy and still overlap. Includes replaceable example photographs.

All patterns

Loading patterns…

Theme
Preview size
Look

Takes your theme’s colours and type.

Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

The signature moment

Three prints dealt across the table

Each print is a core/cover in its own constrained row: a 3/4 portrait at 58% of the column on the left, a 3/4 portrait at 46% in the middle, a 3/2 landscape at 60% on the right. The rows sit in a flow group, because a cover holding an aspect ratio collapses in a vertical flex column. The second and third rows are pulled up by a negative top margin in percent, which is a share of the column's width, so the deal keeps its proportions at every width: each print starts partway down the one before and lands across from it. Later covers paint above earlier ones, so each print lies on the last. A thin mat of your base edges every print, so where two overlap the edge reads as two sheets.

Theme handoff

What comes from where

Theme and pattern

Inherits: every colour, the typeface, the spacing scale and the button. Decides: the three sizes and shapes, the laps, the mat, the 40/60 split, the 1600px measure and the display ramp.

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

Three photographs of different sizes and shapes dealt across the page like prints on a table, each lapping the one before it, beside a display heading, a lede and a button on your page ground.

The signature moment: three prints dealt across the table

Each print is a core/cover in its own constrained row: a 3/4 portrait at 58% of the column on the left, a 3/4 portrait at 46% in the middle, a 3/2 landscape at 60% on the right. The rows sit in a flow group, because a cover holding an aspect ratio collapses in a vertical flex column. The second and third rows are pulled up by a negative top margin in percent, which is a share of the column's width, so the deal keeps its proportions at every width: each print starts partway down the one before and lands across from it. Later covers paint above earlier ones, so each print lies on the last. A thin mat of your base edges every print, so where two overlap the edge reads as two sheets.

Theme behaviourInheritance, fixed decisions and contrast

What it inherits, what it decides

Inherits: every colour, the typeface, the spacing scale and the button. Decides: the three sizes and shapes, the laps, the mat, the 40/60 split, the 1600px measure and the display ramp.

Technical notesBlock mechanics, responsive behaviour and constraints

Type never sits on a photograph

The heading (a bare clamp() display, 44px to 88px, because its size is the composition), the eyebrow (small), the lede (medium at 1.6) and the button sit on your page ground in your colours. The button states no colour.

The phone

The copy and the prints are a wrapping flex row. Each flexSize is max(calc(60% - 2rem), min(100%, calc((52rem - 100%) * 999))) (40% for the copy): its share of the row from 832px up, the whole row below it. The prints drop under the copy on a tablet and a phone and keep the same deal, smaller but still overlapping.

What a buyer changes first

The three photographs, keeping the shapes: portrait, portrait, landscape. Then the heading; four or five words at this size.

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 for the sources and licenses. Pasting an image URL does not import a Media Library attachment.

Questions

Cover cascade: common questions

Does Cover cascade need a plugin?

No. It is built only from core WordPress blocks (button, buttons, cover, group, heading and paragraph), so it pastes into the block editor with nothing to install.

Will Cover cascade match my theme?

Choose by variation. Paper mats takes your theme’s palette; Champagne and rose brings its own colours.

How many variations does Cover cascade have?

2: Paper mats and Champagne and rose. Each is its own markup; choose one in the toolbar above the preview before you copy.

Can I use my own images?

Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library.

Is Cover cascade free?

It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one.

The markup

8.0KB of core-block markup, 6 blocks (button, buttons, cover, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme.

Subscribe to copy it, £49 a yearWhat you copy is yours forever. Not for you? We refund within 14 days.

Back to Core Patterns

Continue exploring

Next in Cover

Explore all 16 Cover patterns Also in Hero

Cover window rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCoverNo plugin needed

Cover window

A full-bleed cover whose photograph sits under a heavy veil of your theme's contrast colour, with display type on one side and, on the other, a second cover showing the same photograph with no veil at all, with the same focal point, so it reads as a window cut through the veil.

CoverPreview pattern
Cover contents rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCoverNo plugin needed

Cover contents

A full-bleed photograph under a heavy veil of your contrast colour, set like a magazine contents page: a large eyebrow, a display title and a short lede, then a ruled list of four rows, each a small clear photograph, a number, a large title and a text link.

CoverPreview pattern
Cover filmstrip rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCoverNo plugin needed

Cover filmstrip

A full-bleed band in your theme's contrast colour with a display heading, a short lede and a button, over a single row of five tall photographs that runs into both edges of the page: the middle three are whole frames numbered 02 to 04 on small plates, and the first and last are narrower crops flush to the page edges, so the strip reads as cut by the page.

CoverPreview pattern