` and nothing else in the block moves. The column carries no `width`: `.wp-block-columns > .wp-block-column` is `flex-basis:0; flex-grow:1` and `[style*=flex-basis]` is `flex-grow:0`, so fixing the left column at 58% and leaving the right one to grow keeps the column's only inline style the border and the padding. ## Making it run the full height, and what happens at 390 Core pins `.wp-block-columns { align-items: normal !important }`, which is already stretch, and `verticalAlignment: "stretch"` is written on the columns block and on **each child column**, because a columns-level alignment does nothing on the front end (measured on `cover-trio`) and the editor writes it onto the children anyway. The right column therefore stretches to the height of the left column's type, and the rule is the height of the inner container rather than the height of the four pairs it sits beside. It is the full height of the CONTENT, not of the 40rem picture. A cover is `display:flex; align-items:center` and its inner container is sized by what is in it, so a rule that ran the whole 40rem would need CSS a pattern cannot ship. The cover's vertical padding is `clamp(3.5rem, 7vw, 6rem)`, which is what sets how much picture is left above and below the rule. **Below 782px core stacks the columns and the rule does not turn.** It stays a left border on a now full-width block, so it reads as a rail down the side of the facts rather than as a divider between two columns. That is a deliberate outcome and not a fallback: the padding-left is unchanged, so the stacked facts are indented off the same hairline. Nothing here needs a media query, which is the only reason it is honest to say so. ## Why type on a photograph is permitted here A photograph's luminance is unknowable, so the rule is that type never sits on one. A cover's veil is the exception that can be measured: its colour is a chain and its opacity is a number, so it is measured composited over a white photograph and over a black one, at the worse pair. `dimRatio` is 80 for that reason and must not be lowered; at 40 the first draft of `cover-veil` measured 2.48:1 and was rejected. The cover states its own `style.color.text` as a chain so core's `:where(.wp-block-cover:not(.has-text-color)) { color:#fff }` never applies, and every heading and paragraph restates its colour, because a theme's heading element style beats an inherited group colour. ## What it inherits, what it decides Inherits: every colour (veil `contrast`, type and rule `base`), the typeface, the spacing scale. Decides: the veil's opacity, the 58/42 split, the 28rem measure on the left, the type ramp, the 40rem minimum height (in `rem`, never `vh`), and the rule itself. The button is the one filled thing in the composition: solid `base` ground with `contrast` text, `border-radius: 0`, sized with padding rather than a `typography` attribute, which does not stay valid across editor versions. ## What a buyer changes first The photograph: the cover includes an example image; choose Replace to pick one from the media library. Then the four pairs on the right, which are the part of the design that is actually about their business. Keep the values to two or three words; they are set at up to 21px and a long one wraps into the pair below it. ## Variations - **Paper rail**: the veil is `base` at 80% and the type `contrast`, and the button inverts with them. The rule's markup is identical to the base's, which is the point of `currentColor`. - **In motion**: `backgroundType: "video"` and nothing else; a clip instead of a still, same veil, same type, same rule. Core writes `autoplay muted loop playsinline` and `data-object-fit="cover"` at render. ## The hand-off row A full-bleed hero on its own fills the preview on this page edge to edge, and on a buyer's page it is never alone either. So the pattern ships with what comes next: a short row on your theme's paper under the cover, a tracked label at a 12rem flex size and one paragraph at a 34rem measure. It is ordinary page copy, it shows where the hero ENDS, and it is the first thing a buyer rewrites or deletes. It carries the same chains as everything else. In `paper-rail` the cover and the hand-off row are both light, and the boundary between them is the photograph rather than a change of ground. ## 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.