Hero cover rail

A full-bleed core/cover with an example photograph, with a heavy veil over the buyer's own photograph and a core/columns inside its inner container: the statement on the left at a 28rem measure, four label-and-value pairs on the right, and a hairline between them.

A 1px vertical rule running the full height of the hero's content, straight down the middle of the photograph, dividing what the section claims from what it can prove. Nothing else in the catalogue has a vertical rule, and it works precisely because it is currentColor: it is not a colour the pattern chose, it is whatever colour the theme is already painting the type, so it inverts with the type in paper-rail without a single byte of the rule changing.

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

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.

It is a per-side border on the right core/column: style.border.left = currentColor, solid, 1px, with a padding-left of clamp(1.5rem, 2.6vw, 3rem) holding the labels off it.

Not a core/separator, for two reasons. A separator is horizontal and there is no core attribute that turns it, and Twenty Twenty-Four narrows any separator that is not is-style-wide to var(--wp--preset--spacing--60), so it would render as a 100px stub in a theme the catalogue is verified in.

core/column supports __experimentalBorder with no skipped serialization, so the declarations land on the column's own <div> 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.

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.

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.

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.

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.

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