Hero library · interactive

Hover tile grid

hero.interactive-grid-hover: any design can use this hero. It suits the styles below; pairing it with another style makes the picker warn about a clash.

Rule: Intro in 1–5 (headline top, subhead + CTA bottom); a 3-column grid of 6–9 bordered tiles (number + label) fills 6–12 and inverts tile by tile under the cursor.
Slots: eyebrow, headline, subhead, cta, items[6..9]
Grid: intro 1-5 · tiles 6-12
Notes: Tiles share borders (gap 0, collapsed borders). On hover a tile fills with the accent and its text switches to onAccent (150–200 ms); each tile is a link (category, service, product). Keyboard focus triggers the same state. No motion beyond the colour change under reduced motion.

Build a 3-column grid of 6–9 tiles in 6–12 with shared 1 px borders and no gaps.
Each tile: mono number top-left, label bottom-left; the whole tile is a link.
On hover and focus, fill the tile with the accent and switch its text to onAccent.
Split the intro column: headline at the top, subhead + CTA at the bottom.

Don't

Don't add icons or images to the tiles.
Don't animate the tiles in on load or tilt them in 3D.
Don't use rounded, separated cards.

Phone width

Intro first, then the tiles as a horizontal scroll row (snap per tile), at most 6.

Try this hero in the picker llms.txt

Live, in 3 styles it suits

In Swiss International

hero.interactive-grid-hover · hero

Open alone, full size (desktop, tablet, phone; layout tree included)

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Discovery sprint

Positioning workshop

Identity design

Website

Launch support

Retainer

Desktop

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Discovery sprint

Positioning workshop

Identity design

Website

Launch support

Retainer

Phone, 390 px

In Terminal Mono

hero.interactive-grid-hover · hero

Open alone, full size (desktop, tablet, phone; layout tree included)

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Discovery sprint

Positioning workshop

Identity design

Website

Launch support

Retainer

Desktop

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Discovery sprint

Positioning workshop

Identity design

Website

Launch support

Retainer

Phone, 390 px

In Bento Tech

hero.interactive-grid-hover · hero

Open alone, full size (desktop, tablet, phone; layout tree included)

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Discovery sprint

Positioning workshop

Identity design

Website

Launch support

Retainer

Desktop

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Discovery sprint

Positioning workshop

Identity design

Website

Launch support

Retainer

Phone, 390 px

Suits

Swiss International Terminal Mono Bento Tech Brutalist Neo-Brutalism Bauhaus Constructivist Y2K Chrome Neo-grotesk Minimal

Clashes with

Classical Bookish Organic Earth Luxury Fashion