# Cover lap > A page opener where a full-bleed photograph gives way to a band of your theme's paper, and an ink plate carrying the eyebrow, headline, lede and button straddles the edge between them: half on the picture, half on the page. 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, so the cover reads as a section and not the page. Canonical: https://patternpaste.com/pattern/cover-lap.html Section: Cover Access: Included in Pattern Paste access. Needs: Requires a block theme on WordPress 7.0 to 7.1. 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: button, buttons, cover, group, heading, paragraph Keywords: cover, hero, photo, video, lap, page header ## Variations (3) ### Ink plate (the default) Identical markup in every theme. The plate is your contrast, its type your base, pulled up over the photograph's bottom edge so it sits half on the picture and half on the page. The button inverts to paper on ink. ### In motion Identical markup in every theme. The same lap over a clip. Choose a short, silent, looping video in the cover's media picker; the plate is unchanged, so the type is exactly as legible as it is over a photograph. ### Paper lap Identical markup in every theme. The plate is a sheet of your base held by a one-pixel hairline in currentColor, so its edge survives on the paper half where the band is the same colour. The quietest version; the button is ink. --- ## The signature moment: the plate straddles the edge 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. ## Why the whole thing is inside the cover 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. ## Type never sits on the photograph 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. ## What it inherits, what it decides 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). ## What a buyer changes first 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. ## Variations - **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`. ## The hand-off row 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. ## Finish 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. ## 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.