hero.editorial-cover · Magazine cover

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-cover". A guide only: DESIGN.md and tokens.json are the source of truth.

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 areas
masthead full · dateline full · image 4-12 · coverlines 1-3 · headline 1-8 (12-column grid, 1-based inclusive spans)
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.
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

  • 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.

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
Layout tree (as in design/layout.json)
{
  "pattern": "hero.editorial-cover",
  "kind": "hero",
  "grid": {
    "masthead": "full",
    "dateline": "full",
    "image": "4-12",
    "coverlines": "1-3",
    "headline": "1-8"
  },
  "slots": [
    "siteName",
    "meta",
    "index",
    "heroImage",
    "headline",
    "items[3..5]",
    "cta"
  ],
  "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.",
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 3,
    "minVh": 1,
    "children": [
      {
        "el": "text",
        "span": "full",
        "slot": "siteName",
        "role": "display",
        "step": 8,
        "transform": "uppercase",
        "tracking": "tight",
        "leading": "tight"
      },
      {
        "el": "box",
        "span": "full",
        "mobile": "keep",
        "dir": "row",
        "pad": [
          1,
          0
        ],
        "justify": "between",
        "border": "top",
        "children": [
          {
            "el": "text",
            "slot": "meta",
            "role": "small",
            "transform": "uppercase",
            "tracking": "wide"
          },
          {
            "el": "text",
            "slot": "index",
            "role": "small",
            "transform": "uppercase",
            "tracking": "wide"
          }
        ]
      },
      {
        "el": "media",
        "span": "4-12",
        "rowSpan": "3-4",
        "slot": "heroImage",
        "treatment": "photo",
        "fill": true
      },
      {
        "el": "text",
        "span": "1-8",
        "rowSpan": "4-4",
        "bg": "bg",
        "alignSelf": "end",
        "slot": "headline",
        "role": "h1",
        "step": 5,
        "leading": "tight",
        "maxCh": 22
      },
      {
        "el": "repeat",
        "span": "1-3",
        "rowSpan": "3-3",
        "slot": "items",
        "min": 3,
        "max": 5,
        "layout": "list",
        "gap": 4,
        "divider": true,
        "of": {
          "el": "box",
          "gap": 1,
          "children": [
            {
              "el": "text",
              "color": "link",
              "slot": "number",
              "role": "label"
            },
            {
              "el": "text",
              "slot": "title",
              "role": "h4",
              "leading": "tight"
            }
          ]
        }
      },
      {
        "el": "button",
        "span": "1-3",
        "rowSpan": "5-5",
        "slot": "cta",
        "variant": "underline",
        "arrow": true
      }
    ]
  }
}

Other patterns in this design

Whole design · Spec bundle (JSON) · Hero library page