Hero library · editorial

Editorial index

hero.editorial-index: 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 hero is a table of contents: headline, subhead and link in 1–5 (sticky), and a ruled list of 4–7 numbered entries (number, title, meta) in 7–12; column 6 stays empty.
Slots: eyebrow, headline, subhead, cta, items[4..7]
Grid: intro 1-5 · index 7-12
Notes: Each entry links to a page or section; on hover the row's title shifts right by one space step. The intro column is position: sticky while the list scrolls if it is taller than the viewport.

Treat the hero as a contents page: 4–7 numbered entries in columns 7–12 with hairlines between rows.
Each row: mono number and title (h3) together on the left, a muted meta (page, year, category) flush right.
Keep the intro in 1–5 and leave column 6 empty.
Make every row a link; hover nudges the title right.

Don't

Don't add thumbnails to the rows.
Don't use cards or boxes; rows are separated by rules only.
Don't exceed seven entries — the index must fit one screen at 1440 px.

Phone width

Intro first (not sticky), then the list; meta drops under the title in each row.

Try this hero in the picker llms.txt

Live, in 3 styles it suits

In Swiss International

hero.editorial-index · 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

2 weeks

Positioning workshop

1 day

Identity design

8 weeks

Website

10 weeks

Launch support

4 weeks

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

2 weeks

Positioning workshop

1 day

Identity design

8 weeks

Website

10 weeks

Launch support

4 weeks

Phone, 390 px

In Editorial Magazine

hero.editorial-index · 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

2 weeks

Positioning workshop

1 day

Identity design

8 weeks

Website

10 weeks

Launch support

4 weeks

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

2 weeks

Positioning workshop

1 day

Identity design

8 weeks

Website

10 weeks

Launch support

4 weeks

Phone, 390 px

In Terminal Mono

hero.editorial-index · 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

2 weeks

Positioning workshop

1 day

Identity design

8 weeks

Website

10 weeks

Launch support

4 weeks

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

2 weeks

Positioning workshop

1 day

Identity design

8 weeks

Website

10 weeks

Launch support

4 weeks

Phone, 390 px

Suits

Swiss International Editorial Magazine Terminal Mono Neo-grotesk Minimal Broadsheet Newspaper Brutalist Classical Bookish Japanese Minimal Bento Tech

Clashes with

Maximalist Collage Memphis Seventies Psychedelic