Hero slab over still: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/hero-slab-over-still.html Core Patterns (https://patternpaste.com/patterns/) Hero (https://patternpaste.com/patterns/hero/) Catalogue access Standard # Hero slab over still Two full-bleed slabs stacked on one hard edge: an inverted band carrying an eyebrow, a display headline on a 32rem measure and two buttons, and beneath it a full-bleed picture that carries no type at all. Type and photograph never mix, so no headline can be lost against an image the buyer chooses. The cover includes an example photograph and the block gap between the slabs is zero, so the seam stays a drawn line rather than a margin. Ships with a short hand-off row on your theme's paper below it, so the hero reads as a section and not the page. ## All patterns Search patterns Loading patterns… The signature moment ## A structural mark Two full-bleed slabs meeting on a single hard seam, with type and picture never mixed: the ink slab asserts, the picture answers, and the line between them is the only ornament in the pattern. The block gap between the two is exactly 0 and the cover states margin: 0 top and bottom, so the seam is a drawn line rather than a gap the theme's spacing scale happened to leave. Theme handoff ## What comes from where ### Theme and pattern Inherits: every colour (the slab's contrast ground and base type, the veil, the paper under the hand-off row), the typeface, the spacing scale. Decides: the seam, the 32rem measure the headline is broken over, the type ramp from a 13px eyebrow at 0.26em tracking to a headline running 44px to 88px at -0.035em and 0.96 line-height, the band's generous vertical padding, and the cover's 26rem minimum height in rem, never vh. The heading states its own colour chain, because a theme's heading element style beats an inherited group colour. The cover states its own text colour chain too, so core's :where() rule that paints cover text #fff never applies to anything a buyer adds later. 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 hero built from two full-bleed slabs and nothing else: an inverted band of your theme's contrast colour carrying an eyebrow, an h1 and two buttons, and directly beneath it a core/cover that holds a photograph and no words. They are siblings, they meet on one hard edge, and that edge is the design. ### The signature moment: a structural mark Two full-bleed slabs meeting on a single hard seam, with type and picture never mixed: the ink slab asserts, the picture answers, and the line between them is the only ornament in the pattern. The block gap between the two is exactly 0 and the cover states margin: 0 top and bottom, so the seam is a drawn line rather than a gap the theme's spacing scale happened to leave. Make it yoursVariations and the edits to make first ### Variations - Slate and mint: a slate slab with an Arial Black headline, a mint eyebrow and primary action, and a pale hand-off row below the still. - Paper slab: the band inverts to base ground with contrast type and the buttons swap with it. The seam still reads, because what meets the picture is a flat field of colour either way. - In motion: backgroundType: "video" on the cover and nothing else changed; core writes autoplay muted loop playsinline. Since no type sits on the clip, the motion costs no legibility. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits, what it decides Inherits: every colour (the slab's contrast ground and base type, the veil, the paper under the hand-off row), the typeface, the spacing scale. Decides: the seam, the 32rem measure the headline is broken over, the type ramp from a 13px eyebrow at 0.26em tracking to a headline running 44px to 88px at -0.035em and 0.96 line-height, the band's generous vertical padding, and the cover's 26rem minimum height in rem, never vh. The heading states its own colour chain, because a theme's heading element style beats an inherited group colour. The cover states its own text colour chain too, so core's :where() rule that paints cover text #fff never applies to anything a buyer adds later. Technical notesBlock mechanics, responsive behaviour and constraints ### Why it is legibility-safe by construction A photograph's luminance is unknowable, which is why the rest of the catalogue either veils it heavily (cover-veil) or puts the type on a plate (cover-plate). This hero takes the third route: it puts no type on the photograph at all. The cover's inner container is empty, so there is nothing in this pattern whose contrast depends on the image the buyer uploads. Every word sits on a flat contrast or base field, measured as an ordinary pair. That is the reason to choose this over a veil hero. A veil hero is a promise that a heavy overlay bounds the ground; this one has no ground to bound. The buyer can drop in a blown-out sky or a night shot and the headline is exactly as readable as it was. The veil that IS on the cover is a light one, dimRatio 20 of the same contrast chain the slab above is painted in. It carries no legibility argument; it is there so the picture sits in the same tonal family as the band and the seam reads as one construction rather than two pasted things. ### Why the slabs are siblings and not nested Both slabs are alignfull children of one flow-layout wrapper with blockGap: 0 and zero padding. The hard edge comes from that and from the cover's own zero margins, never from a negative margin, for two measured reasons. A negative margin on a first child collapses into its parent, so pulling the cover up would move the wrapper instead. And a cover forms no stacking context while clipping its overflow, so a sibling pulled up AFTER a cover paints under the photograph, invisibly. The cover's own padding is 0 on all four sides, because core ships .wp-block-cover { padding: 1em } and the cover holds nothing that needs insetting. ### What a buyer changes first The photograph: the cover includes an example image; choose Replace to pick one from the media library. Then the headline, which wants three or four words at this size; the 32rem measure is what makes it break into a block of two or three lines rather than running across the band. Then the two button labels. ### The hand-off row A hero of two full-bleed slabs fills the preview on this page edge to edge, and on a buyer's page it is never the whole page either. So the pattern ships with what comes next: a short row on your theme's paper under the picture, a tracked label and one paragraph at a 34rem measure. It shows where the hero ENDS, it is ordinary page copy, and it is the first thing a buyer rewrites or deletes. ### 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 ## Hero slab over still: common questions Does Hero slab over still 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 Hero slab over still match my theme? Choose by variation. Ink over still, In motion and Paper slab take your theme’s palette; Mend and Slate and mint bring its own colours. How many variations does Hero slab over still have? 5: Ink over still, In motion, Mend, Paper slab and Slate and mint. 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 Hero slab over still free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 7.5KB 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 Features Appointment letter checklist What to bring to a first appointment, set as the confirmation letter itself: a card with the booking's details written into ruled blanks (date, time, who, where, length and fee) and a checklist of empty squares to tick the night before, beside a short introduction. States no colour and no font of its own. (https://patternpaste.com/pattern/appointment-letter-checklist.html)Stats Arisings recycled figures A figures section on an inverted slab where one number carries it: a percentage set at display size over a heading that finishes the sentence and a short note, beside a tall photograph. Under it three ruled tiles break the figure down, each a large percentage, a heading and a line, with a second photograph as the fourth tile. Four across on a wide screen, two on a tablet, one on a phone. States no colour and no font of its own. (https://patternpaste.com/pattern/arisings-recycled-figures.html)Compare Compact comparison rows A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-compact-rows.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 Hero Access Subscription Plugin None, core blocks only Variations 5 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks button, buttons, cover, group, heading, paragraph Presets color 5, font-size 2, spacing 3 WordPress 7.0+ Continue exploring ## Next in Hero Explore all 32 Hero patterns (https://patternpaste.com/patterns/hero/)Also in Cover (https://patternpaste.com/patterns/cover/) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero right weight A picture-led hero that reverses the usual hierarchy: the photograph takes the wide right column at a 4:3 crop and the words are a narrow 38% caption beside it, set small and hung from the same bottom line. Hero Preview pattern (https://patternpaste.com/pattern/hero-right-weight.html) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero stack rules An opening section ruled like a ledger: three full-measure bands divided by currentColor hairlines, a tracked eyebrow and a date on the top line, the headline alone in the tall middle band at up to 104px, and a lede with two actions on the closing line. Hero Preview pattern (https://patternpaste.com/pattern/hero-stack-rules.html) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero statement An opening section with nothing in it but the sentence: one statement set at extreme display size on a narrow measure, a short rule under it, a single tracked meta line, and two actions. Hero Preview pattern (https://patternpaste.com/pattern/hero-statement.html)