[Library] Hero

Catalogue accessStandard

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 cover ships empty, image or video, and the veil is heavy enough that whatever you point it at, the words pass contrast. 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 whole page.

Variation View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

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.

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 is valid at 7.0 and marked invalid in the 6.6 editor, so they are sized with padding.

Why the type is legible on the footage136 words

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 first68 words

The clip: the cover ships EMPTY, with no <video> element and no url in the markup at all, which is valid at both 6.6 and 7.0. Point it at a short, silent, looping file in the media library and core writes autoplay muted loop playsinline. Then the headline. Keep it under about six words; three lines is the shape this was drawn for and four is the ceiling.

Variations71 words
  • 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.
The measure grows with the window183 words

The headline's clamp(3rem, 7vw, 6.5rem) reaches its 104px ceiling at a 1486px window, but the corner block's measure used to be a flat 26rem, so past that point the type got bigger inside a box that did not: at 1920 the headline wrapped to four lines in a 416px column standing in a 1744px bleed, about 30% of it. The group's contentSize is now clamp(26rem, 32vw, 38rem). 32vw is below 26rem at every width up to 1300, so the composition at 1280, 820 and 390 is exactly the one that was authored and measured; above that the measure opens with the window and stops at 38rem, which is 608px, about 71 characters of the lede and three lines of headline.

The corner stays pinned to the bleed's own edge and is deliberately NOT aligned to the hand-off row's 1240px content column, which auto-centres and so drifts right as the window widens. The type is a mark in the corner of the bleed, not a column heading; aligning it to a row the buyer deletes first would trade the signature for a tidier measurement.

The hand-off row81 words

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. So the pattern ships what comes next: a short row on your theme's paper under the cover, a tracked label beside one paragraph at a 36rem measure. It is ordinary page copy, it shows where the hero ENDS, and it is the first thing a buyer rewrites or deletes. It carries the same chains as everything else.

Back to the library

Continue exploring

Next in Hero

Explore all 18 Hero patterns