header blocks

171 production-ready header blocks across these categories:

HeroNavbar
PRO

navbar75

Masthead Navigation With Mega Panel

A publication masthead whose first section opens a full width panel split by hairlines into the newest issue and two indexed columns, always in the markup and revealed with CSS.

PRO

hero173

Bylined Hero With Studio Band

A hero that sets its position and paragraph against a seal button held at the right edge of the same row, then runs a captioned wide photograph beneath it and closes on one portrait card per writer.

PRO

hero172

Cover Band Hero For The Latest Issue

A tall photographic band with the newest piece set over a rising gradient, its dateline, display title, summary and seal button anchored to the bottom, above a hairline row of the issues before it.

PRO

hero171

Search-First Archive Hero

A centered hero whose main action is a search field rather than a button, with the week's most looked-up terms as chips beneath it and the size of the archive stated at the bottom.

PRO

hero170

Subscriber Count Hero With Offer Bubble

A centered newsletter hero led by the subscriber count, with a speech bubble naming what arrives on joining, a row of publication marks under it, and an email row that turns into a confirmation.

PRO

hero169

Centered Newsletter Hero With Reader Quote

A centered newsletter hero that puts one reader quote in a bordered card between the headline and the email row, and swaps the row for a confirmation line once it is submitted.

PRO

hero168

Search Reach Hero

A hero pairing a light display heading with an offset paragraph and action, then a wide image tile floating a live search results panel over four hairline columns explaining what the search covers.

PRO

hero167

Quote-Led Provenance Hero

A hero that gives the display heading over to a customer sentence, credits the speaker beneath it, and evidences the quote with a hairline provenance table before the product line, actions, and a tile floating the figure behind the claim.

PRO

hero166

Split Headline Hero

An editorial hero that breaks its display heading across two lines and slots a square image tile floating a live payment card into the gap, with the paragraph and action landing under a hairline.

PRO

hero165

Filmstrip Hero

A centered hero closing on an edge-to-edge filmstrip of five frames divided by hairlines, one of which floats a live view switcher instead of a photograph.

PRO

hero164

Media-First Reverse Hero

A hero that opens on a full-bleed image band with a live phone frame anchored into it, then sets the eyebrow, light display heading, paragraph, and actions underneath rather than above.

PRO

hero163

Framed Peek Hero

A hero framed inside a bordered card on a soft section, with centered copy and two actions above an image tile that runs past the card's bottom edge so the live metrics panel is cropped like a real screenshot.

PRO

hero162

Indexed Rows Hero

A hero that sets a light display heading and one action against a column of numbered hairline rows, then closes on a full-bleed image band with a live approval request pinned into its corner.

PRO

hero161

Overlapping Savings Hero

A hero that pairs a light display heading with an offset paragraph and action, then drops a wide image band under them and overlaps its lower edge with a live savings card.

PRO

hero160

Inverted Reliability Hero

A hero built as one dark panel: a light display heading, two actions, and a hairline table of service commitments beside a bordered image column that floats a live uptime strip.

PRO

hero159

Photo Collage Hero

A centered hero with an eyebrow, light display heading, and two actions above a staggered three-photo collage whose raised middle tile floats a live booking confirmation.

PRO

hero158

Migration Hero With Step Tracker

A hero that opens on an oversized light heading, then drops a hairline into a narrow copy column with one action and a wide image tile floating a live horizontal step tracker.

PRO

hero157

Full-Bleed Canvas Hero

A hero that splits the viewport in two: an eyebrow, light display heading, two actions, and a hairline proof row on one side, and a full-height photo column floating a live trend metric on the other.

PRO

hero156

Split Screen Panel Hero

Edge-to-edge split hero: a dark half carries the statement, paragraph, outline pill CTA and a ruled detail row, while the other half is a full-height photograph with a pill caption in its corner.

PRO

hero155

Framed Poster Hero

Full-bleed photographic hero printed inside an inset hairline frame, with the eyebrow and availability line on the top rule, an oversized statement in the middle, and notes, a pill CTA and an image credit anchored along the bottom.

PRO

hero154

Poster Hero With Proof Card

Poster-style hero where a wide cinematic image carries a soft proof card overlapping its lower corner on desktop, naming a project, what was delivered and one measured outcome.

PRO

hero153

Auto Cycling Photo Hero

Full-bleed hero whose background photographs cross-fade on a timer, with a caption and bar indicators on a ruled line at the foot that also let a reader jump straight to a frame.

PRO

hero151

Centered Photo Trust Hero

Full-bleed photographic hero with a centered statement, paragraph and outline pill CTA over a tinted scrim, closed by a ruled client logo strip rendered inverted so the marks read on the dark image.

PRO

hero150

Offset Image Pair Hero

Split hero pairing a statement, paragraph and two pill CTAs with a pair of captioned portrait images, the second dropped by a stagger on desktop so the column reads as an editorial spread.

Markdown version