# 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. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/cover-cascade.html
Section: Cover
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: cover, photo, overlap, prints, collage, stack, wedding

## Variations (2)

### Paper mats (the default)

Identical markup in every theme.

Your page ground and contrast type; each print is edged in your base so the overlaps read as separate sheets.

### Champagne and rose

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

A wedding look: a pale champagne ground with deep plum-brown type, champagne mats on the prints and a dusty rose pill button, with an Iowan Old Style headline over Helvetica.


---

## 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.

## 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 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.

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