Skip to content
SloplessTry the picker

Hero library · split

Split, media right

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

Rule
Copy in columns 1–6, vertically centred; the image fills columns 7–12 at the full hero height. A hairline and a muted meta line close the copy column.
Slots
eyebrow, headline, subhead, cta, cta2, heroImage, meta
Grid
copy 1-6 · media 7-12
Notes
The image fills its columns edge to edge (no frame; radius only if the style's radius token says so). Subhead max 34 ch.

Do

  • Keep the copy column to columns 1–6 and vertically centre it against the image.
  • Let the image fill columns 7–12 and the whole hero height, cropped to fill (object-fit: cover).
  • Use the style's own button shapes and radius tokens for the two CTAs; the secondary is a ghost button.
  • Close the copy column with a hairline and one muted meta line (rating, location, availability).
  • At phone width show the image first at 4:5, then the copy.

Don't

  • Don't centre the copy horizontally or put the headline over the image.
  • Don't add a gradient overlay, floating badges or stats cards on the photo.
  • Don't use a stock illustration in place of the photo; use the style's treatment (photo, duotone, grayscale).

Live, in 3 styles it suits

In Neo-grotesk Minimal

hero.split-media-right · hero

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 projectRead case studies

Booking projects from June 2026

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 projectRead case studies

Booking projects from June 2026

Phone, 390 px

In Bento Tech

hero.split-media-right · hero

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 projectRead case studies

Booking projects from June 2026

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 projectRead case studies

Booking projects from June 2026

Phone, 390 px

In Scandinavian Soft

hero.split-media-right · hero

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 projectRead case studies

Booking projects from June 2026

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 projectRead case studies

Booking projects from June 2026

Phone, 390 px