hero.editorial-columns · Editorial columns

A hero pattern from the hero library, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 1. Give the section root data-pattern="hero.editorial-columns". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A ruled kicker bar spans the page; the headline runs 1–8 at step 7; below it a deck in 1–4 and a ruled text column in 5–8 start the story; a captioned 3:4 photo fills 9–12 beside both.
Slots
eyebrow, meta, headline, heroImage, lead, statement, cta
Grid areas
kicker full · headline 1-8 · deck 1-4 · column 5-8 · figure 9-12 (12-column grid, 1-based inclusive spans)
Notes
Reads like the top of a feature page: the hero already contains running text. The text column has a left rule (column rule); body copy at step 0 with comfortable leading.
Tokens
bg #F4F0E6 · text #1B1A17 · heading #0D0C0A · accent #872824 · accent2 #BE6D65 · UnifrakturMaguntia / Newsreader · radius 0px · space unit 6px (full list in design/tokens.json)

Do

  • Open with a full-width ruled kicker bar: section label left, byline or date right.
  • Set the headline in columns 1–8 at step 7, two or three lines.
  • Start the story inside the hero: a deck in 1–4 (italic if the body font ships one) and the opening paragraph of the story (a statement, not the deck repeated) with a left column rule in 5–8.
  • Place a 3:4 photo with a caption in 9–12, spanning both rows.

Don't

  • Don't centre anything; every block is flush left on its column.
  • Don't use buttons; the action is a 'Continue reading →' link.
  • Don't let body text run wider than 44 characters.

Phone width

  • Kicker (label and byline may wrap to two lines), headline (step 6), photo at 4:3 with caption, deck, then body column without the rule.

Brand & product studio

Booking projects from June 2026

We make complicated companies simple to choose

Corvid Robotics — identity

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

Most rebrands fail because they start with a logo. Ours start with a sales call recording and a spreadsheet of lost deals.

Start a project