Skip to content
SloplessTry the picker

Hero library · editorial

Magazine cover

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

Rule
A masthead (site name at step 8, full width) over a dateline rule; the cover photo fills 4–12; cover lines (3–5 numbered teasers) run down 1–3; the headline overlaps the photo's lower-left on a page-colour field.
Slots
siteName, meta, index, heroImage, headline, items[3..5], cta
Grid
masthead full · dateline full · image 4-12 · coverlines 1-3 · headline 1-8
Notes
Cover lines are short teasers with a number or kicker in the accent colour. The headline sits on a bg-coloured field where it crosses the photo (columns 4–8), like a cover line knocked out of the picture.

Do

  • Set the masthead (site name) at step 8 across the full width, uppercase, tight.
  • Run a dateline rule under it: issue / season left, date or number right.
  • Fill columns 4–12 with a portrait-cropped cover photo.
  • List 3–5 numbered cover lines down columns 1–3, hairlines between them.
  • Overlap the headline onto the photo's lower-left corner on a solid bg-coloured field.

Don't

  • Don't put the masthead over the photo.
  • Don't write cover lines longer than eight words.
  • Don't use a filled button; the CTA is an underlined link under the cover lines.

Phone width

  • Masthead (fitted to width), dateline, photo at 4:5, headline, then cover lines.
  • Remove the overlap; keep the dateline on one line.

Live, in 3 styles it suits

In Editorial Magazine

hero.editorial-cover · hero

Northfold

Booking projects from June 2026

06

We make complicated companies simple to choose

01

Discovery sprint

02

Positioning workshop

03

Identity design

04

Website

Start a project
Desktop

Northfold

Booking projects from June 2026

06

We make complicated companies simple to choose

01

Discovery sprint

02

Positioning workshop

03

Identity design

04

Website

Start a project
Phone, 390 px

In Luxury Fashion

hero.editorial-cover · hero

Northfold

Booking projects from June 2026

06

We make complicated companies simple to choose

01

Discovery sprint

02

Positioning workshop

03

Identity design

04

Website

Start a project
Desktop

Northfold

Booking projects from June 2026

06

We make complicated companies simple to choose

01

Discovery sprint

02

Positioning workshop

03

Identity design

04

Website

Start a project
Phone, 390 px

In Broadsheet Newspaper

hero.editorial-cover · hero

Northfold

Booking projects from June 2026

06

We make complicated companies simple to choose

01

Discovery sprint

02

Positioning workshop

03

Identity design

04

Website

Start a project
Desktop

Northfold

Booking projects from June 2026

06

We make complicated companies simple to choose

01

Discovery sprint

02

Positioning workshop

03

Identity design

04

Website

Start a project
Phone, 390 px