[Library] Hero
Hero
The opening section: a headline, a line of orientation and the first action. 18 patterns, 31 variations between them: every variation is its own copy-paste file, one click from its pattern.
Thumbnails on this page are rendered in Twenty Twenty-Five. Your theme is applied to every live preview, on a pattern's own page.
18 patterns
Thumbnail in Twenty Twenty-Five
HeroStandard
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 cover ships empty; you choose the image or the clip. States no colour and no font of its own.
6 blocks · core only · 2 variations Preview In motionInk aperture
Thumbnail in Twenty Twenty-Five
HeroStandard
Hero column portrait
An opening section whose photograph stands as a column rather than a band: a tracked eyebrow, a display headline, a lede held to a 30rem measure and two actions on the left, and on the right a single portrait cover taller than everything beside it, carrying nothing but one tracked caption on an opaque plate at its foot. The cover ships empty; you choose the picture. States no colour and no font of its own.
8 blocks · core only · 2 variations Preview Night portraitPortrait left
Thumbnail in Twenty Twenty-Five
HeroStandard
Hero cover rail
A full-bleed hero on your own photograph, with a 1px hairline running down the middle of the picture to divide the statement from the facts. The headline, the line of orientation and the one button sit on a 28rem measure to the left of the rule; four tracked label and value pairs sit to its right. The rule is currentColor, so it is whatever colour your theme paints the type. Ships the cover empty. 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.
8 blocks · core only · 2 variations Preview In motionPaper rail
Thumbnail in Twenty Twenty-Five
HeroStandard
Hero flex row
A hero built on a wrapping flex row instead of columns: one loose 30rem block holding a tracked eyebrow, a display headline and a single ruled action, and beside it four small ruled facts, each a tracked label over a short value. Because it is flex and not columns, the row reflows continuously as the window narrows rather than stepping from two columns to one at 782px: the facts fall past the headline one at a time and finish as a pair of pairs beneath it. States no colour and no font of its own.
5 blocks · core only · 2 variations Preview Night rowFacts first
Thumbnail in Twenty Twenty-Five
HeroStandard
Hero index
An opening that doubles as a table of contents: a tracked eyebrow and one display headline held to a 30rem measure, and beside it a ruled index of four numbered entries, each a tracked numeral, a short title and one line of description, closed top and bottom by currentColor hairlines. Its signature is density contrast, one loose statement against four dense ruled entries, so the section opens the page and names what is on it in the same breath. The four entries are meant to be the four sections below. States no colour and no font of its own.
7 blocks · core only · 2 variations Preview Index acrossNight index
Thumbnail in Twenty Twenty-Five
HeroStandard
Hero ledger
A full-bleed opening section that doubles as a spec sheet: a display headline, a short lede and one action fill the left, while the right holds three ruled rows, each a tracked label over a value set large enough to read as content rather than fine print. The rules are currentColor and the ledger closes on a bottom rule. States no colour and no font of its own.
7 blocks · core only · 1 variation Preview Night ledger
Thumbnail in Twenty Twenty-Five
HeroStandard
Hero media and text
A hero built on Media & Text rather than columns, so the photograph runs off the side of the screen while the words stay on the page's own measure. The picture takes 45% of the full viewport width and bleeds to the left edge; the eyebrow, the headline, the lede and the two buttons sit in a 30rem measure beside it. Ships the media frame empty; you choose the photograph. States no colour and no font of its own.
6 blocks · core only · 2 variations Preview Media rightNight
Thumbnail in Twenty Twenty-Five
HeroStandard
Hero plate on paper
A hero that is a card laid on the page rather than the page's own top edge: a full-bleed band of your theme's paper with generous air on all four sides, holding one inset plate of your contrast colour that carries the whole hero, eyebrow, headline, lede and two buttons. No photograph and no cover; the authority comes from the ink ground and the paper around it. States no colour and no font of its own.
5 blocks · core only · 2 variations Preview Paper plateOffset plate
Thumbnail in Twenty Twenty-Five
HeroStandard
Hero quote open
A hero that opens in someone else's voice: one quoted sentence set at display size on a 44rem measure, a currentColor hairline under it, and beneath the hairline a tiny tracked attribution row and one action. Testimonials sit in the middle of a page; this puts the quotation first and makes it the first thing the page says. States no colour and no font of its own.
5 blocks · core only · 2 variations Preview Night quoteIndented quote
Thumbnail in Twenty Twenty-Five
HeroStandard
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.
6 blocks · core only · 2 variations Preview Paper reelStill
Thumbnail in Twenty Twenty-Five
HeroStandard
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. The headline is deliberately smaller than a hero headline usually is, because the picture is doing the asserting. The image block ships empty; you choose the photograph. States no colour and no font of its own.
8 blocks · core only · 2 variations Preview Night weightMirrored weight
Thumbnail in Twenty Twenty-Five
HeroStandard
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 ships empty 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.
6 blocks · core only · 2 variations Preview In motionPaper slab
Thumbnail in Twenty Twenty-Five
HeroStandard
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. The headline is a row in a table rather than a statement floating in air. States no colour and no font of its own.
5 blocks · core only · 2 variations Preview Night ledgerDoubled rules
Thumbnail in Twenty Twenty-Five
HeroStandard
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. The band's own vertical air is stated rather than inherited, so the statement holds the screen on its own. States no colour and no font of its own.
5 blocks · core only · 1 variation Preview Flush left
Thumbnail in Twenty Twenty-Five
HeroSignatureStandard
Hero tint wash
A full-bleed photographic opener with exactly three things on it: one two-word headline at up to 128px, a 12px tracked line sitting straight underneath it, and one button. The jump between the two type sizes is the whole composition, and a 90% veil of your contrast colour is what lets a two-word headline hold a 36rem stage whatever photograph you choose. Ships the cover empty. States no colour and no font of its own, and ends on a short hand-off row on your theme's paper.
6 blocks · core only · 2 variations Preview In motionStated wash
Thumbnail in Twenty Twenty-Five
HeroStandard
Hero, two covers
An opening built from two identical photograph frames side by side with a hairline gutter between them. The left frame carries an opaque plate with the eyebrow, the headline and the one action; the right frame carries nothing at all. Both covers ship empty; you choose the two photographs. 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 opening reads as a section and not the page.
8 blocks · core only · 2 variations Preview Loaded rightInk plate
Thumbnail in Twenty Twenty-Five
HeroStandard
Waitlist hero
A launch hero built around one oversized action: a short headline, a single line of copy, then a full-width button slab with a tiny reassurance line under it, and three small proof numerals on a ruled foot beneath that. The action is the second-largest element in the section, so the page reads as an invitation to join rather than as a general introduction. States no colour and no font of its own.
7 blocks · core only · 1 variation Preview Night queue