Plate lap: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/plate-lap.html Core Patterns (https://patternpaste.com/patterns/) Gallery (https://patternpaste.com/patterns/gallery/) Catalogue access Standard # Plate lap Two photographs made into one object by overlap: a tall portrait frame with a smaller landscape frame lapping over its lower-right corner, hanging past both the bottom and the right edge, and a caption plate below squaring the pair back up. Example images are included with their crops set. ## All patterns Search patterns Loading patterns… The signature moment ## One frame laps the other Two photographs are made into one object by overlap rather than by a grid. The smaller frame breaks the taller one's rectangle at the corner: it starts above the portrait's bottom edge, so it covers it, and it ends outside the portrait's right edge, so it escapes it. Nothing is aligned to anything; the pair is held together by the fact that one of them is on top. The caption plate below then runs from the portrait's left edge to the landscape's right edge and squares the whole composition back up, which is what stops the lap reading as a slip. Theme handoff ## What comes from where ### Theme and pattern Inherits: every colour (the band is contrast with base type, the plate is base with contrast type, and every one of them is a two-rung chain ending on a core default), the typeface, and the spacing scale (spacing|80 above and below the band, spacing|50 between the pair and the plate, spacing|40 inside the plate, spacing|20/spacing|50 between the label and the line). Decides: the two crops (3/4 and 3/2, both object-fit: cover), the 32rem and 25rem frame widths and the 44rem measure that sets the overlap, the depth of the lap and the width at which it releases, the 1240px band and its clamp gutters, and the proportion of the type (a 13px tracked caps label against a 15px line at 1.5, both fixed rather than fluid; see below). 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 Two photographs and one caption. A tall 3/4 portrait frame carries the section; a smaller 3/2 landscape frame laps over its lower-right corner and hangs past it on two sides at once. Under them a caption plate, a sheet of your base carrying your contrast, runs the full width of the pair with a tracked caps label and one short line. The band itself is inverted: your contrast as the ground, your base as the type, so the plate reads as paper laid on a wall and the photographs hang on it. ### The signature moment: one frame laps the other Two photographs are made into one object by overlap rather than by a grid. The smaller frame breaks the taller one's rectangle at the corner: it starts above the portrait's bottom edge, so it covers it, and it ends outside the portrait's right edge, so it escapes it. Nothing is aligned to anything; the pair is held together by the fact that one of them is on top. The caption plate below then runs from the portrait's left edge to the landscape's right edge and squares the whole composition back up, which is what stops the lap reading as a slip. It survives colourlessness because it is made of negative margin and stacking order and of nothing else. There is no rule, no tint and no shadow doing the work, so the device is identical in a theme with twelve palette slugs and in one with none. It survives the phone because the overlap is a clamp() that releases; see below. Make it yoursVariations and the edits to make first ### Variations - Mirrored lap. The composition axis, and only that axis. The portrait moves right, the landscape laps its lower-LEFT corner, and the plate's label and line move to the right edge to match. Same two frames, same proportions, same colours, same clamp: three justifyContent values and the paragraphs' text alignment are the entire difference, because the lap is made of widths rather than of offsets. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits, what it decides Inherits: every colour (the band is contrast with base type, the plate is base with contrast type, and every one of them is a two-rung chain ending on a core default), the typeface, and the spacing scale (spacing|80 above and below the band, spacing|50 between the pair and the plate, spacing|40 inside the plate, spacing|20/spacing|50 between the label and the line). Decides: the two crops (3/4 and 3/2, both object-fit: cover), the 32rem and 25rem frame widths and the 44rem measure that sets the overlap, the depth of the lap and the width at which it releases, the 1240px band and its clamp gutters, and the proportion of the type (a 13px tracked caps label against a 15px line at 1.5, both fixed rather than fluid; see below). Technical notesBlock mechanics, responsive behaviour and constraints ### How the lap is built, and the trap it avoids A lap built from a negative margin on a FIRST child collapses into its parent's margin. Block margins touch through a parent that has no padding and no border, so a first child pulling itself up by -9rem simply moves the parent instead and nothing overhangs anything. That shipped once in this catalogue (cover-lap): the markup read as correct while the render showed no lap at all. This pattern uses both halves of the fix: - The pair sits in a vertical flex group ({"type":"flex","orientation":"vertical","justifyContent":"stretch"}). A flex child's margins never collapse, with its container or with its siblings, so the negative margin arrives at full value and is exactly the overlap you can read off the file. - The lapping frame is the second child. The portrait is authored first, the landscape second, which is also what makes the landscape paint on top: flex items are painted in document order, so the later one wins. No z-index anywhere, which matters because a core block cannot express one. justifyContent: "stretch" is on the flex group on purpose: a vertical flex group defaults to align-items: flex-start, which would shrink both frames to their content width and lose every proportion in the design. The horizontal side of the lap needs no negative margin at all. The pair is held in a 44rem constrained wrapper; inside it the portrait is a constrained group of 32rem justified left and the landscape a constrained group of 25rem justified right, so their boxes overlap by 13rem and the landscape hangs 12rem past the portrait's right edge as a consequence of two widths rather than an offset. That is why the mirrored variation is two words changed and not a re-authoring. ### What happens at 390px The overlap is clamp(-10rem, 5.5rem - 18vw, 1.5rem), and the middle term is the design. At 1400px it resolves past the floor and clamps to -10rem, which is about 60% of the landscape frame's height: a full lap. At 782px, the width where core stacks columns, it is about -53px: a kiss. At 390px the expression turns positive and the ceiling takes over at 1.5rem, so the overlap is released entirely and the two frames stack as a plain pair with a small gap. That is deliberate and not a fallback. Both constrained groups are wider than a phone, so on a phone both frames are full-bleed within the gutters; a frame overhanging another frame of the same width has nothing to overhang, and a lap holding at -10rem there would cover 40% of the screen with one photograph sitting on another. Reduced or released is the only honest answer, and the plate below is unchanged, so the section still ends on the same square edge it does at 1400. ### The caption type is fixed, and that is the fix The plate is a fixed box: it is the full width of the 44rem wrapper at every width above a phone, because the wrapper is the measure that sets the overlap. The label and the line sit in it as one flex row, side by side and bottom aligned, and that row fills nearly the whole plate at 1280. Both caption sizes used to be fluid (0.9vw and 1.05vw between the same floors and a 14px/17px ceiling). Fluid type inside a fixed box only ever ends one way: above about 1430px the two grew past the row and the row wrapped. In the base that reads as a slightly awkward second line. In Mirrored lap it was a real defect, measured at 1920: the row is justified to the right, so once it wrapped the short label was flushed right on its own line and started 233px inside the line below it, leaving the caption's own column with nothing to explain it. So both sizes are now the plain values the clamps already resolved to at 1280 and at the 1400 the pattern previews at. Nothing about the pattern moves at or below that width; above it the caption holds the proportion it was authored with, which is the same thing every other measurement in this pattern does. ### Type never sits on a photograph The buyer swaps both images, so a photograph's luminance is as unknowable as an accent slug's and any caption set on one can land white on white with nothing to warn you. So the only words in this section are on the plate, below the pair, on a guaranteed base/contrast pairing. Nothing is set over an image, and the images carry no text of their own. ### What a buyer changes first - The photographs. Both image blocks include example photographs. Choose Replace on each frame to select from your media library; the crop and overlap hold whatever proportions your files are. The included public image URLs travel with the copied markup. - The caption. The label reads best in caps under 20 characters; the line is one sentence and should not wrap more than twice on the plate. - The depth of the lap. It is one value, the landscape group's margin-top. Make the first number less negative for a shallower lap; keep the third number at or above zero so the phone still releases. - The band's ground. Swapping the band's contrast chain and the plate's base chain gives the whole section on paper with an inked plate. Swap both halves of a pair, never one. ### Measured The base and the variation both take every colour and typeface from the theme. Both were checked in the editor, rendered and looked at. ### 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 ## Plate lap: common questions Does Plate lap need a plugin? No. It is built only from core WordPress blocks (group, image and paragraph), so it pastes into the block editor with nothing to install. Will Plate lap match my theme? Choose by variation. Lap right and Mirrored lap take your theme’s palette; Vow brings its own colours. How many variations does Plate lap have? 3: Lap right, Mirrored lap and Vow. 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 Plate lap free? It is included with a subscription, with every Core Pattern and variation. 64 Core Patterns are free to copy without one. 4.4KB of core-block markup, 3 blocks (group, image, 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)Contact Contact cover ledger A full-bleed contact cover: a display heading in the top left, and a ruled ledger of address, hours, phone and email in the far lower-right corner, label left and value right between hairline rules, with the photograph running between them. A heavy veil of your theme's contrast colour keeps every line legible whatever photograph you choose. The ledger drops under the heading on a phone. 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. (https://patternpaste.com/pattern/contact-cover-ledger.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 Gallery Access Subscription Plugin None, core blocks only Variations 3 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks group, image, paragraph Presets color 5, spacing 4 WordPress 7.0+ Continue exploring ## Next in Gallery Explore all 30 Gallery patterns (https://patternpaste.com/patterns/gallery/) Shot in Twenty Twenty-Five Gallery No plugin needed ### Margin notes Three stacked 3:2 photograph frames in a wide right-hand column, each with its caption hanging in a narrow left margin, and a single 1px rule running unbroken down the join for the whole height of the section. Gallery Preview pattern (https://patternpaste.com/pattern/margin-notes.html) Shot in Twenty Twenty-Five Gallery No plugin needed ### Proof strip A full-bleed band holding a narrow 34rem ribbon of four portrait frames stacked one under another, each ruled off by a hairline and captioned with a tracked title and one short line. Gallery Preview pattern (https://patternpaste.com/pattern/proof-strip.html) Shot in Twenty Twenty-Five Gallery No plugin needed ### Quote gallery A display-size quotation held between two portrait frames. Gallery Preview pattern (https://patternpaste.com/pattern/quote-gallery.html)