header blocks

200 production-ready header blocks across these categories:

HeroNavbar
PRO

hero195

Three Screens Hero

A centred install hero with a serif headline that settles in word by word, an intro, a rounded command pill that copies the install command on click beside a sliding-marker pill, and under it three portrait page previews that blur in as they load and rise at different speeds on scroll, the middle one sitting higher, each with a small caption.

PRO

hero194

Turning Request Hero

A centred install hero whose serif headline ends in a word that keeps changing (a pricing page, a hero, a footer), so the promise reads as a list of things the agent can be asked for. Below it an ink command pill that copies the install command on click sits beside a sliding-marker outline pill, then a quiet note.

PRO

hero193

Ink Command Hero

A dark install hero with film grain and no photograph, where the install command itself is the centrepiece: set large in monospace with a hairline underline, it copies on click and confirms with a tick. A short serif headline above, an intro, two sliding-marker pills and a ruled row of three figures below.

PRO

hero192

Half Photo Command Hero

A full-height split install hero: text on the left with an eyebrow, a serif headline that settles in word by word, an intro, a rounded command pill that copies the install command on click and two sliding-marker pills; on the right an edge-to-edge photograph that blurs in and drifts on scroll with a small caption.

PRO

hero191

Two Steps Hero

A centred install hero that explains itself in two numbered steps under a ruled line: run the command, copied from a rounded pill on click, then ask for a page, shown as an example prompt in a muted mono panel. Serif headline settles in word by word, one sliding-marker pill below.

PRO

hero190

Terminal Split Hero

A split install hero: on the left an eyebrow, a serif headline that settles in word by word, an intro and two sliding-marker pills; on the right an ink terminal card that drifts on scroll, prints the install command and its output line by line, ends on a blinking cursor and copies the command from its title bar.

PRO

hero189

Command on Photo Hero

A full-height photographic install hero: the photo blurs in and drifts slower than the page under a scrim and film grain, a serif headline settles in word by word, then a frosted command pill that copies the install command on click, two sliding-marker pills and a short column of figures.

PRO

hero188

Single Command Hero

The most minimal install hero: a serif headline that settles in word by word, then one rounded command pill that copies the install command on click and confirms with a tick, and a quiet note with a docs link. No image, no buttons.

PRO

navbar82

Full Screen Menu Navbar

A minimal bar with a wordmark, a sliding-marker pill and a two-line menu toggle that turns into a cross, opening a full-screen ink menu with film grain: numbered oversized serif links settle in one after another on the left, the photograph and description on the right blur to whichever link is hovered, and a ruled foot carries contact details, social links and the pill. The menu is always in the markup and shown with CSS.

PRO

navbar81

Columns Mega Navbar

A sticky frosted navbar with two mega items, each dropping a full-width panel of three small-caps link groups in serif type beside a soft featured card with a photograph, an eyebrow and a lifting arrow link. Every panel stays in the markup and is shown with CSS; a light mobile menu groups the same links.

PRO

navbar80

Photo Mega Navbar

A sticky frosted navbar whose first item opens a full-width panel: a ruled list of serif services on the left that brightens and slides an arrow in on hover while the photograph on the right blurs to the matching room, plus plain links, a sliding-marker pill and a light mobile menu. The panel is always in the markup and shown with CSS.

PRO

navbar79

Announcement Navbar

A sticky navbar topped by a thin ink announcement bar with a small-caps link, then a frosted bar with the serif wordmark, uppercase links that underline from the left on hover, a sliding-marker pill, and a light full-height mobile menu whose links settle in one after another.

PRO

navbar78

Classic Navbar

The classic layout in the language: serif wordmark on the left, uppercase letter-spaced links in the middle that underline from the left on hover, a quiet text link and a sliding-marker pill on the right, and a light full-height mobile menu whose links settle in one by one.

PRO

navbar77

Centred Wordmark Navbar

A sticky, frosted navbar with the serif wordmark in the centre, uppercase letter-spaced links split to either side that underline from the left on hover, a small sliding-marker pill, and a full-height light mobile menu whose links settle in one after another.

PRO

navbar76

Veil Navbar

A sticky, frosted navbar with a serif wordmark, uppercase letter-spaced links that underline from the left on hover, a sliding-marker pill action, and a full-height ink mobile menu whose links settle in one after another.

PRO

hero187

Search Hero

A centred photographic hero built around a search field: the photograph blurs in and drifts slower than the page under a dark scrim and film grain, a serif headline settles in word by word, then a rounded search field with a keyboard shortcut hint, a row of quick links and optional pills. The field can hand its click to a command palette instead of being a form.

PRO

hero186

Half Photo Hero

A full-height hero split down the middle: eyebrow, a serif headline that settles in word by word, an intro, two sliding-marker pills on the left, and a photograph filling the right half edge to edge that zooms out on load and drifts slower than the page.

PRO

hero185

Logos Hero

A centred hero with an eyebrow, a serif headline that settles in word by word, an intro and a sliding-marker pill, closed by a ruled row where greyscale partner logos drift right to left behind soft edge fades, next to a small-caps label.

PRO

hero184

Figures Hero

A text hero with an eyebrow and a serif headline that settles in word by word on the left, the intro and two sliding-marker pills on the right, and a ruled row of three serif figures that count up beneath, with no image.

PRO

hero183

Call Request Hero

A lead hero: eyebrow, a serif headline that settles in word by word, an intro and dotted facts on the left, and a soft muted request form on the right with name, email and phone fields, a full-width sliding-marker pill and a privacy note.

PRO

hero182

Centred Photo Hero

A full-height photographic hero with everything centred: the photograph zooms out on load and drifts slower than the page under a dark scrim and film grain, beneath an eyebrow, a serif headline that settles in word by word, an intro and two sliding-marker pills.

PRO

hero181

Benefits Split Hero

A split hero: eyebrow, a serif headline that settles in word by word, an intro, three ringed check benefits and a sliding-marker pill on the left, and a portrait photograph drifting inside its frame on the right.

PRO

hero180

Centred Serif Hero

The plainest hero in the language: a centred eyebrow, a serif headline that settles in word by word, an intro, two sliding-marker pills and an avatar trust line, with no image at all.

PRO

hero179

Turning Word Hero

A hero whose serif headline always breaks over two lines, the second one a word that takes turns, each blurring in as the last blurs out over a line kept at a fixed height, beside an intro and a sliding-marker pill, above three photographs that drift at their own pace as the page scrolls, the middle one set a step lower.

Markdown version