Cover stair

Three tall portrait photographs in a row, each core/cover at 3/4, each column set lower than the last. A numbered label and a short title sit under each photograph; the heading and lede sit at the top right.

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.

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.

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.

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.

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

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.

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 for the sources and licenses.