# Steps cover stair

> A full-bleed cover with a heavy veil of your theme's contrast colour over the photograph, a display headline at the top left and three numbered steps set as a stair: each step a huge numeral, a short title and one line under a hairline rule, every column starting lower than the one before, so the steps descend down and to the right across the photograph. On a phone they stack in order and the stair flattens. Includes a replaceable example photograph. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it.

Canonical: https://patternpaste.com/pattern/steps-cover-stair.html
Section: How it works
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 6.7 to 7.0. 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: steps, process, how it works, stair, cover, photo, numbered

## Variations (2)

### Ink veil (the default)

Identical markup in every theme.

An 80% veil of your contrast over the photograph with your base as the type: the headline top left, three steps descending to the lower right.

### Paper veil

Identical markup in every theme.

The same stair inverted: the veil is your base at 80% and every word and rule your contrast, the photograph a pale ghost behind ink. For a page that stays light.


---

## The signature moment: the steps descend the photograph

Each step is a huge numeral, a short title and one line, hung from a hairline
rule. The three columns share a row but not a top: the second starts about a
step lower than the first, the third lower again, so the rules and numerals
read as a stair going down and to the right beneath the headline. The process
moves forward and the eye moves down with it. It is composition alone, so it
holds in greyscale. On a phone the columns stack in order and the stair
flattens into a ruled list.

## 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 one-line
descriptions 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 a measure of `clamp(18rem, 52vw, 56rem)`.
- The numerals are paragraphs at a bare `clamp(4.5rem, 10vw, 11rem)`, line
  height 0.9: display marks, not headings.
- Step titles are `h3` at a bare `clamp(1.5rem, 2.2vw, 2.5rem)`, off the
  ladder, so they hold their own against the numerals and never read as
  captions; the lines under them are body copy on `medium`, held to a 26rem
  measure, one line wherever the column allows it; "How it works" is a
  label with its own `clamp()` floored at 15px.
- Hierarchy comes from size and the rules alone: nothing is set in capitals.
- Every heading states its size and colour chain and nothing else.

## Layout

- The cover keeps its default layout and position; its height comes from its
  content, never `vh`.
- The steps are a `core/columns` row aligned to the top on the row and on every
  column. The stair is each column's `padding-top`:
  `min(clamp(3rem, 8vw, 10rem), max(0rem, calc((100vw - 782px) * 100)))` on the
  second and twice that on the third. Below 782px, where core stacks columns,
  the second term is zero and the offsets vanish.
- Every gap is a spacing preset. Rules are `currentColor`, so they are always
  the colour of the type.

## 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 headline
measure and the depth of each step. The cover states its own text colour chain
so core's `:where()` rule that paints cover text `#fff` never applies.

## What a buyer changes first

The photograph: choose Replace on the cover. Then the headline and the three
steps, each title about three words and each line under ten.

## Variations

- **Paper veil**: the veil is `base` at 80% and every word and rule `contrast`,
  the photograph a pale ghost behind ink.

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