hero.editorial-magazine-feature-opener · Feature opener

A hero pattern from Editorial Magazine, 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-magazine-feature-opener". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A 21:9 photograph across the full grid with a caption; below it the kicker on 2–4, a serif headline at step 6 on 2–11, an italic dek on 2–8 and the byline.
Slots
heroImage, eyebrow, headline, subhead, author, meta
Grid areas
image 1-12 · kicker 2-4 · headline 2-10 · dek 2-8 · byline 2-8 (12-column grid, 1-based inclusive spans)
Notes
Like the first spread of a magazine feature. Column 1 stays empty under the image so the text block is inset from the photo's edge.
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #9B2234 · accent2 #D26F74 · Playfair Display / Source Serif 4 · radius 0px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • The photograph opens the hero: 21:9 across 1–12, full colour, with a small italic caption under its right edge. Below, everything hangs from column 2 (column 1 is the margin): the kicker in small uppercase tracked body face in the accent colour on 2–4; the headline in the display serif at step 6, weight 400, tight leading, max ~18 ch, on 2–11 (three to four lines at 1440 px); the dek (standfirst) in italic at lead size on 2–8; then the byline — "Words by …" in small uppercase and a muted date. At phone width the image stays first, the margin column collapses and the headline drops to step 3.
Corvid Robotics — identity

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.

Hanna Lindqvist

Booking projects from June 2026

Layout tree (as in design/layout.json)
{
  "pattern": "hero.editorial-magazine-feature-opener",
  "kind": "hero",
  "grid": {
    "image": "1-12",
    "kicker": "2-4",
    "headline": "2-10",
    "dek": "2-8",
    "byline": "2-8"
  },
  "slots": [
    "heroImage",
    "eyebrow",
    "headline",
    "subhead",
    "author",
    "meta"
  ],
  "notes": "Like the first spread of a magazine feature. Column 1 stays empty under the image so the text block is inset from the photo's edge.",
  "tree": {
    "el": "grid",
    "gap": 4,
    "rowGap": 3,
    "children": [
      {
        "el": "media",
        "span": "1-12",
        "slot": "heroImage",
        "aspect": "21/9",
        "treatment": "photo",
        "caption": true
      },
      {
        "el": "text",
        "span": "2-4",
        "color": "accent",
        "slot": "eyebrow",
        "role": "eyebrow",
        "transform": "uppercase",
        "tracking": "wide",
        "font": "body"
      },
      {
        "el": "text",
        "span": "2-11",
        "slot": "headline",
        "role": "display",
        "step": 6,
        "weight": 400,
        "leading": "tight",
        "maxCh": 18
      },
      {
        "el": "text",
        "span": "2-8",
        "slot": "subhead",
        "role": "lead",
        "italic": true,
        "maxCh": 58
      },
      {
        "el": "box",
        "span": "2-8",
        "dir": "row",
        "gap": 2,
        "align": "baseline",
        "children": [
          {
            "el": "text",
            "slot": "author",
            "role": "small",
            "transform": "uppercase",
            "weight": 600,
            "tracking": "wide",
            "font": "body"
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "meta",
            "role": "small"
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.editorial-magazine-feature-opener.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.editorial-magazine-feature-opener — Editorial Magazine</title>
<link rel="stylesheet" href="base.css">
<style>
  .hero { padding: 64px 0; row-gap: 24px; }
  figure { grid-column: 1 / 13; } .photo { aspect-ratio: 21 / 9; } figure figcaption { text-align: right; }
  .kicker { grid-column: 2 / 5; }
  h1 { grid-column: 2 / 11; font-size: var(--step-7); line-height: 0.98; max-width: 18ch; }
  .dek { grid-column: 2 / 9; max-width: 58ch; }
  .byline { grid-column: 2 / 9; display: flex; gap: 16px; align-items: baseline; }
  @media (max-width: 640px) { h1 { font-size: var(--step-3); } }
</style>
</head>
<body>
<section class="wrap">
  <div class="hero grid">
    <figure><div class="photo" role="img" aria-label="Fishing boats at dawn in the harbour of Essaouira"></div><figcaption class="caption">The harbour at Essaouira, 6:10 a.m. Photograph by Léa Martin.</figcaption></figure>
    <p class="kicker accent">Travel — The long read</p>
    <h1>The last sardine fleet of the Atlantic coast</h1>
    <p class="dek">For three hundred years the boats of Essaouira have gone out before dawn. A new port, and a warming sea, may end it within a decade.</p>
    <p class="byline"><span class="kicker">Words by Samira El Idrissi</span><span class="caption" style="margin:0;font-style:normal">12 October 2026 · 24 min read</span></p>
  </div>
</section>
</body>
</html>

Other patterns in this design

Whole design · Spec bundle (JSON) · On the style page