Cover lap: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/cover-lap.html Core Patterns (https://patternpaste.com/patterns/) Cover (https://patternpaste.com/patterns/cover/) Catalogue access Standard # 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. 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. ## All patterns Search patterns Loading patterns… 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. Theme handoff ## What comes from where ### Theme and pattern 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). Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview 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 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. Make it yoursVariations and the edits to make first ### 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. Theme behaviourInheritance, fixed decisions and contrast ### 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). Technical notesBlock mechanics, responsive behaviour and constraints ### 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 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. ### 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 (https://patternpaste.com/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment. Questions ## Cover lap: common questions Does Cover lap need a plugin? No. It is built only from core WordPress blocks (button, buttons, cover, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Cover lap match my theme? Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted. How many variations does Cover lap have? 3: Ink plate, In motion and Paper lap. Each is its own markup; choose one in the toolbar above the preview before you copy. Can I use my own images? Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Is Cover lap free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 8.2KB of core-block markup, 6 blocks (button, buttons, cover, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Editorial Article footer The close of an article: a portrait of the author beside their name, the biography under both inside a currentColor slip held to the middle half of the measure, and the previous and the next post hanging off the two outer edges so the section reads as a doorway rather than a footer. The name, the biography and the two neighbours are dynamic core blocks, so they are the post's own and the preview here is sample data; the portrait is an ordinary image block you swap for your author's own. The previous and next links only resolve on a single post template, which is where this pattern belongs. (https://patternpaste.com/pattern/article-footer.html)Call to action Callout response clock A call-out section where the day is drawn to scale: a label, heading and a call button over one framed bar of three segments whose widths are their hours, 8am to 6pm, 6pm to midnight and midnight to 8am. Each segment carries its hours, how long we take to arrive at display size and the call-out fee under a hairline, and one line under the bar gives the hourly rate after that. On a phone the bar stacks into three rows that still name their hours. States no colour and no font of its own. (https://patternpaste.com/pattern/callout-response-clock.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). ## Specifications Section Cover Access Subscription Plugin None, core blocks only Variations 3 Colour From your theme Type From your theme Motion None Blocks button, buttons, cover, group, heading, paragraph Presets color 5, spacing 4, font-size 2 WordPress 7.0+ Continue exploring ## Next in Cover Explore all 16 Cover patterns (https://patternpaste.com/patterns/cover/)Also in Hero (https://patternpaste.com/patterns/hero/) Shot in Twenty Twenty-Five Cover No plugin needed ### Cover interval A short full-bleed band of looping video set between two text sections, almost empty on purpose: a 20% veil of your contrast colour over the clip and one small ink plate on the bottom-right edge carrying a tracked label and one line. Cover Preview pattern (https://patternpaste.com/pattern/cover-interval.html) Shot in Twenty Twenty-Five Cover No plugin needed ### Cover ledger A full-bleed cover on your own photograph with nothing on it but a ledger of three paper plates flush along its foot: a number at display size, a small tracked label and one line on each, with the photograph showing through the gaps. Cover Preview pattern (https://patternpaste.com/pattern/cover-ledger.html) Shot in Twenty Twenty-Five Cover No plugin needed ### Cover lit column A display heading and lede on your page ground over a full-bleed band of four tall photographs set edge to edge. Cover Preview pattern (https://patternpaste.com/pattern/cover-lit-column.html)