hero.split-media-left · Split, media left

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

Rule
The image fills columns 1–7 at full hero height; column 8 stays empty; a narrow copy column in 9–12 sits on the bottom edge and ends in a ruled facts list and one CTA.
Slots
heroImage, eyebrow, headline, subhead, facts[3..4], cta
Grid areas
media 1-7 · copy 9-12 (12-column grid, 1-based inclusive spans)
Notes
Copy is bottom-aligned, not centred: the headline starts roughly two-thirds down the image. Facts are 3–4 label/value rows separated by hairlines (hours, price, location, lead time); the rows keep label left, value right at phone width. At phone width the image is 4:5.
Tokens
bg #F3EBDD · text #2E2A22 · heading #2A1F14 · accent #BC572B · accent2 #A56B00 · Fraunces / Karla · radius 28px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 0

Do

  • Fill columns 1–7 with one photograph cropped to cover the full hero height.
  • Leave column 8 empty as a deliberate gutter between image and copy.
  • Bottom-align the copy column (9–12) so the headline sits in the lower third of the hero.
  • End the copy with 3–4 hairline-separated facts (label left, value right) and a single primary CTA.

Don't

  • Don't vertically centre the copy — that turns it back into the stock split hero.
  • Don't add a second button; the facts list is the secondary information.
  • Don't put text, badges or gradients on the photo.

Phone width

  • Show the image first at 4:5, then the copy column at full width.
  • Keep the facts as full-width label/value rows; never wrap them into a grid.

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.

Hours

Studio open Mon–Thu, 9:30–18:00

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512

Start a project
Layout tree (as in design/layout.json)
{
  "pattern": "hero.split-media-left",
  "kind": "hero",
  "grid": {
    "media": "1-7",
    "copy": "9-12"
  },
  "slots": [
    "heroImage",
    "eyebrow",
    "headline",
    "subhead",
    "facts[3..4]",
    "cta"
  ],
  "notes": "Copy is bottom-aligned, not centred: the headline starts roughly two-thirds down the image. Facts are 3–4 label/value rows separated by hairlines (hours, price, location, lead time); the rows keep label left, value right at phone width. At phone width the image is 4:5.",
  "tree": {
    "el": "grid",
    "gap": 4,
    "align": "stretch",
    "minVh": 0.85,
    "children": [
      {
        "el": "media",
        "span": "1-7",
        "slot": "heroImage",
        "aspect": "4/5",
        "treatment": "photo",
        "fill": true
      },
      {
        "el": "box",
        "span": "9-12",
        "alignSelf": "end",
        "gap": 4,
        "pad": [
          8,
          0
        ],
        "children": [
          {
            "el": "text",
            "color": "textMuted",
            "slot": "eyebrow",
            "role": "eyebrow"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "h1",
            "step": 5,
            "leading": "tight",
            "maxCh": 14
          },
          {
            "el": "text",
            "slot": "subhead",
            "role": "body",
            "maxCh": 36
          },
          {
            "el": "repeat",
            "slot": "facts",
            "min": 3,
            "max": 4,
            "layout": "list",
            "gap": 2,
            "divider": true,
            "of": {
              "el": "box",
              "mobile": "keep",
              "dir": "row",
              "gap": 2,
              "justify": "between",
              "children": [
                {
                  "el": "text",
                  "color": "textMuted",
                  "slot": "label",
                  "role": "small"
                },
                {
                  "el": "text",
                  "slot": "title",
                  "role": "label"
                }
              ]
            }
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "primary",
            "arrow": true
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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