Hero reel: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/hero-reel.html Core Patterns (https://patternpaste.com/patterns/) Hero (https://patternpaste.com/patterns/hero/) Catalogue access Standard # Hero reel A full-bleed video cover, 44rem tall, with every word of it packed into the bottom-left corner: a tracked eyebrow, a display headline held to a measure that stays 26rem up to a 1300px window and opens to 38rem on a wide one, one line of orientation and two buttons. The other four fifths of the bleed are left empty on purpose, so the clip has somewhere to be a clip and the type reads as one dense mark against it. The video cover remains empty for your own clip; the still-image variation includes an example photograph, and the veil is heavy enough that whatever you point it at, the words pass contrast. Ships with a short hand-off row on your theme's paper below it, so the hero reads as a section and not the whole page. ## All patterns Search patterns Loading patterns… The signature moment ## Density contrast One dense block of type in the bottom-left corner of an otherwise entirely empty 44rem bleed. The eyebrow, the headline, the lede and the buttons all sit inside one measure, so the 48-104px headline wraps to three short lines and the four items stack into a single hard-edged mark; everything above and to the right of it is clip. The emptiness is the design. Fill it, centre it, or run a row across the foot and the pattern is gone. Theme handoff ## What comes from where ### Theme and pattern Inherits: every colour (veil contrast, type base, the solid button base on contrast), the typeface, the spacing scale. Decides: the veil's opacity, the 44rem minimum height (in rem, never vh), the corner, the measure, the type ramp and the button padding. The cover states its own style.color.text as a chain so core's :where() rule painting cover text #fff never applies, and every heading and paragraph inside restates its own chain rather than inheriting one, because a theme's heading element style beats an inherited group colour. The outline button is currentColor at 1px over transparent, so it follows whichever way the colour is pointing. Neither button carries a typography attribute: that does not stay valid across editor versions, so they are sized with padding. 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 full-bleed core/cover set to backgroundType: "video", 44rem tall, with a tracked eyebrow, an h1, one line of lede and two buttons packed into its bottom-left corner. Nothing else is in it. ### The signature moment: density contrast One dense block of type in the bottom-left corner of an otherwise entirely empty 44rem bleed. The eyebrow, the headline, the lede and the buttons all sit inside one measure, so the 48-104px headline wraps to three short lines and the four items stack into a single hard-edged mark; everything above and to the right of it is clip. The emptiness is the design. Fill it, centre it, or run a row across the foot and the pattern is gone. Make it yoursVariations and the edits to make first ### Variations - Still: backgroundType back to the default image. The identical composition over a photograph, and nothing else differs at all. - Paper reel: the colour axis by inversion. The veil is base at 80% and all the type, including the solid button's ground, is contrast. Inversion between base and contrast is the only colour move that arrives in every theme; the hand-off row below is unchanged, because it was already paper. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits, what it decides Inherits: every colour (veil contrast, type base, the solid button base on contrast), the typeface, the spacing scale. Decides: the veil's opacity, the 44rem minimum height (in rem, never vh), the corner, the measure, the type ramp and the button padding. The cover states its own style.color.text as a chain so core's :where() rule painting cover text #fff never applies, and every heading and paragraph inside restates its own chain rather than inheriting one, because a theme's heading element style beats an inherited group colour. The outline button is currentColor at 1px over transparent, so it follows whichever way the colour is pointing. Neither button carries a typography attribute: that does not stay valid across editor versions, so they are sized with padding. Technical notesBlock mechanics, responsive behaviour and constraints ### Why the type is legible on the footage A photograph's luminance is unknowable and a moving one changes it 25 times a second, so the rule is that type never sits on either. A veil is the exception that can be measured: its colour is a chain and its opacity is a number, so the worst ground the type can land on is the veil over a white frame and the veil over a black one. Both are composited and the worse pair is the one judged. At dimRatio 80 with a contrast veil and base type that pair passes; the same markup at 40 measured 2.48:1 when cover-veil was authored. The veil may not go below 80 here, because there is no plate under this type: the corner block sits straight on the veil, which is what makes the emptiness read as emptiness. ### What a buyer changes first The clip: the cover ships EMPTY, with no