Cover lap

A page opener in two grounds. A full-bleed core/cover on your photograph, then a band of your theme's paper, and across the seam between them a plate of your theme's ink carrying everything a visitor reads: eyebrow, headline, a 36rem lede and one button.

The plate is pulled up by margin-top: clamp(-7rem, -9vw, -4rem) so that roughly half of it sits on the photograph and half on the page. It is a different move from cover-plate, where the plate grows out of the cover's corner and stays inside it: here the plate belongs to neither ground and joins them. The clamp shrinks the lap on a phone so the photograph keeps a readable strip above it.

• Paper lap: the plate is a sheet of base with a one-pixel hairline in currentColor, so its edge survives on the half where the band is the same colour; the button is ink on paper.
• In motion: backgroundType: "video"; a clip instead of a still. The cover remains empty for your own clip; choose a short, silent, looping clip, and core writes autoplay muted loop playsinline.

Inherits: every colour (band base, plate contrast, veil contrast), the typeface, the spacing scale. Decides: the lap's depth, the type ramp (a 13px tracked eyebrow, a headline from 36px to 68px at 1.02 and -0.03em, a 16px to 18px lede at 1.55), the plate's padding, the 1240px measure, and that the button carries no typography (a core/button with typography does not stay valid across editor versions).

The obvious structure, cover then a sibling plate pulled up over it, paints nothing: a cover's veil and photograph are positioned children with a z-index, the cover itself forms no stacking context, so a later sibling's background paints UNDER them, invisibly. So the paper band is a full-width group INSIDE the cover's inner container, which core gives z-index: 1, and the cover's minHeight (20rem) is only a floor: the band's margin-top is what gives the photograph its height.

The first draft of this pattern also used a custom contentPosition, which shrink-wraps the inner container, so the band stopped short of the right edge and the photograph showed beside it; and its plate was paper on paper, so the lap was invisible. Neither was visible in the markup; only the rendered page showed them.

Every word is on the plate, a contrast ground under base type, measured as an ordinary pair: 21:1 in every check theme. The photograph carries a 20% veil and nothing else. The cover states its own text colour so core's :where() rule that paints cover text #fff never applies.

The photograph: the cover includes an example image; choose Replace to use your own. Then the headline, which wants to stay on two lines at 390.

A full-bleed cover 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 and one paragraph at a 34rem measure. It is ordinary page copy, it shows where the cover ENDS, and it is the first thing a buyer rewrites or deletes. It carries the same chains as everything else.

Two knobs on the product page, set before copying and applied to the copied markup and the live frame alike (src/constants/finish.js):

• Corners: border-radius on the plate, sharp, soft (8px) or round (20px).
• Plate: solid, or glass, the plate's own chain at 88% over transparent through color-mix(). The colour still inherits; only the alpha is trim. Measured by compositing the layer over every ground beneath it, the paper band and both photograph bounds: ink glass 13.1:1 at worst in Twenty Twenty-Five, paper glass 13.6:1 over the black bound. color-mix() needs a 2023 browser; on an older one the declaration is dropped and the plate paints nothing, which is why the authored state is solid and glass is the buyer's choice.

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.