# Cover stair

> Three tall portrait photographs in a row, each set lower than the last by the same step so their tops form a staircase, with a numbered label and a short title under each. The heading and lede sit in the space the staircase leaves at the top right. On a phone the photographs stack in one column and the steps drop away. Includes three replaceable example photographs. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/cover-stair.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: column, columns, cover, group, heading, paragraph
Keywords: cover, photo, portrait, steps, staggered, itinerary

## Variations (2)

### Three steps (the default)

Identical markup in every theme.

Every word sits on your page ground in your contrast; the photographs carry no type, and the step is a fixed 12rem on a wide screen.

### Slate and bracken

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

A walking-holiday look: a slate-blue ground with chalk type and bracken orange day labels; Iowan Old Style display over Helvetica.


---

## The signature moment: the photographs step down the page

The second column is padded down by one step and the third by two, so the
photographs' tops form a staircase, and the whole row is pulled up under the
heading so the first photograph rises beside it. The heading takes the space
the staircase leaves over the second and third columns; its group is as wide
as those two columns, so its left edge lines up with the second photograph.

## The phone

`core/columns` stacks below 782px, so the step is
`clamp(0rem, calc((100vw - 48.875rem) * 9), 12rem)`: zero wherever the columns
stack, and the full 12rem a few pixels above it. The pull under the heading
uses the same ramp. On a phone the photographs stack in one clean column with
no stray offsets.

## Type never sits on a photograph

The photographs carry no veil and no text. The heading (a bare `clamp()`
display, 44px to 88px: its size is the composition), the lede (`medium` at
1.6), the labels (`small`) and the titles (`x-large`, on the ladder) sit on
your page ground in your contrast.

## What it inherits, what it decides

Inherits every colour, the typeface and the spacing scale. Decides the step,
the portrait ratio, the 1.5rem gutter, the 1680px measure and the heading's
two-column width.

## What a buyer changes first

The three photographs: select a cover and choose Replace. Portrait
photographs work best; the cover crops to `3/4`.

## The Styled look

`variations/slate-and-bracken.html` states its own colours and faces: a slate-blue ground (#283a4b) with chalk type (#ece9e1) and bracken orange (#e8995e) for the eyebrow and the day labels, which measures above 4.5:1 on the slate. Iowan Old Style (Palatino, Georgia) sets the headings over Helvetica.

## Included images

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