# 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. 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 hero reads as a section and not the page. Canonical: https://patternpaste.com/pattern/hero-slab-over-still.html Section: Hero 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: hero, slab, cover, photo, banner, headline ## Variations (5) ### Ink over still (the default) Identical markup in every theme. The top slab is your contrast colour with your base as the type; the picture sits directly under it behind a light 20% veil of the same contrast, which is there to tie the two tones together and nothing else. Nothing is written on the photograph. ### In motion Identical markup in every theme. The still becomes a clip. Choose a short, silent, looping video in the cover's media picker; nothing else changes, and since no type sits on it the motion costs no legibility. ### Mend This variation states its own colours and states its own type: identical in every theme. The Mend physio set: a deep teal slab with an apricot label and a large clinical white headline over a golfer mid-swing, a white 6px-corner button and an underlined link, then a clinical white strip with a sage label, all in Avenir Next. ### Paper slab Identical markup in every theme. The band inverts: your base as the ground, your contrast as the type, buttons the other way round. The seam reads exactly as hard, because what meets the picture is a flat field of colour either way. ### Slate and mint This variation states its own colours and states its own type: identical in every theme. States a slate slab and pale hand-off row, with an Arial Black headline and mint used for the eyebrow and primary action. --- ## 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. ## 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 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. ## 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. ## 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. ## 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](/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment.