hero.video-split · Split with vertical video

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

Rule
Copy in 1–6 with a 3–4 row chapter list (timestamp + title); a 9:16 vertical video in 8–11 with a small 'now playing' caption under it.
Slots
eyebrow, headline, subhead, items[3..4], cta, heroImage, caption
Grid areas
copy 1-6 · video 8-11 · caption 8-11 (12-column grid, 1-based inclusive spans)
Notes
The chapter rows seek the video to their timestamp on click. Video muted, looping, playsinline with a poster; pause control on the frame. Reduced motion: poster + play button.
Tokens
bg #F6FBFF · text #192028 · heading #091018 · accent #00B0FB · accent2 #7D9FFF · Unbounded / Sora · radius 28px · space unit 8px (full list in design/tokens.json)

Do

  • Use a vertical 9:16 video in columns 8–11 with the style's radius — like a phone reel.
  • List 3–4 chapters under the subhead: mono timestamp, title; clicking a row seeks the video.
  • Keep one primary CTA under the chapters.
  • Add a small muted 'Now playing' caption under the video.

Don't

  • Don't use a landscape video in this hero.
  • Don't add phone-frame mockup chrome around the video.
  • Don't autoplay with sound.

Phone width

  • Video first at 9:16 capped to 70svh height, then copy and chapters; hide the caption.

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.

01

Discovery sprint

02

Positioning workshop

03

Identity design

Start a project
● 0:42

Corvid Robotics — identity

Layout tree (as in design/layout.json)
{
  "pattern": "hero.video-split",
  "kind": "hero",
  "grid": {
    "copy": "1-6",
    "video": "8-11",
    "caption": "8-11"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "items[3..4]",
    "cta",
    "heroImage",
    "caption"
  ],
  "notes": "The chapter rows seek the video to their timestamp on click. Video muted, looping, playsinline with a poster; pause control on the frame. Reduced motion: poster + play button.",
  "tree": {
    "el": "grid",
    "gap": 4,
    "align": "center",
    "minVh": 0.9,
    "children": [
      {
        "el": "box",
        "span": "1-6",
        "rowSpan": "1-2",
        "gap": 4,
        "children": [
          {
            "el": "text",
            "color": "textMuted",
            "slot": "eyebrow",
            "role": "eyebrow"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "h1",
            "step": 6,
            "leading": "tight",
            "maxCh": 14
          },
          {
            "el": "text",
            "slot": "subhead",
            "role": "lead",
            "maxCh": 34
          },
          {
            "el": "repeat",
            "slot": "items",
            "min": 3,
            "max": 4,
            "layout": "list",
            "gap": 2,
            "divider": true,
            "of": {
              "el": "box",
              "mobile": "keep",
              "dir": "row",
              "gap": 3,
              "align": "baseline",
              "children": [
                {
                  "el": "text",
                  "color": "textMuted",
                  "slot": "number",
                  "role": "label",
                  "font": "mono"
                },
                {
                  "el": "text",
                  "slot": "title",
                  "role": "body"
                }
              ]
            }
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "primary",
            "arrow": true
          }
        ]
      },
      {
        "el": "media",
        "span": "8-11",
        "rowSpan": "1-1",
        "mobile": "reverse",
        "slot": "heroImage",
        "aspect": "9/16",
        "treatment": "video",
        "frame": "rounded"
      },
      {
        "el": "text",
        "span": "8-11",
        "rowSpan": "2-2",
        "mobile": "hide",
        "color": "textMuted",
        "slot": "caption",
        "role": "small"
      }
    ]
  }
}

Other patterns in this design

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