Skip to content
SloplessTry the picker

Hero library · split

Split, media left

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

Rule
The image fills columns 1–7 at full hero height; column 8 stays empty; a narrow copy column in 9–12 sits on the bottom edge and ends in a ruled facts list and one CTA.
Slots
heroImage, eyebrow, headline, subhead, facts[3..4], cta
Grid
media 1-7 · copy 9-12
Notes
Copy is bottom-aligned, not centred: the headline starts roughly two-thirds down the image. Facts are 3–4 label/value rows separated by hairlines (hours, price, location, lead time); the rows keep label left, value right at phone width. At phone width the image is 4:5.

Do

  • Fill columns 1–7 with one photograph cropped to cover the full hero height.
  • Leave column 8 empty as a deliberate gutter between image and copy.
  • Bottom-align the copy column (9–12) so the headline sits in the lower third of the hero.
  • End the copy with 3–4 hairline-separated facts (label left, value right) and a single primary CTA.

Don't

  • Don't vertically centre the copy — that turns it back into the stock split hero.
  • Don't add a second button; the facts list is the secondary information.
  • Don't put text, badges or gradients on the photo.

Phone width

  • Show the image first at 4:5, then the copy column at full width.
  • Keep the facts as full-width label/value rows; never wrap them into a grid.

Live, in 3 styles it suits

In Mid-Century Modern

hero.split-media-left · 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.

Hours

Studio open Mon–Thu, 9:30–18:00

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512

Start a project
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.

Hours

Studio open Mon–Thu, 9:30–18:00

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512

Start a project
Phone, 390 px

In Organic Earth

hero.split-media-left · 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.

Hours

Studio open Mon–Thu, 9:30–18:00

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512

Start a project
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.

Hours

Studio open Mon–Thu, 9:30–18:00

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512

Start a project
Phone, 390 px

In Scandinavian Soft

hero.split-media-left · 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.

Hours

Studio open Mon–Thu, 9:30–18:00

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512

Start a project
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.

Hours

Studio open Mon–Thu, 9:30–18:00

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512

Start a project
Phone, 390 px