hero.video-inset-frame · Video inset under the headline

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

Rule
A full-width display headline at step 6; under it, on one row, a subhead + CTA in 1–4 and a wide 21:9 rounded video window in 5–12 that sits like part of the headline.
Slots
eyebrow, headline, subhead, cta, heroImage
Grid areas
headline 1-12 · copy 1-4 · video 5-12 (12-column grid, 1-based inclusive spans)
Notes
The video window is muted, looping and playsinline with a poster; it expands to a full player (with sound and controls) on click. Under prefers-reduced-motion show the poster and a play button instead of autoplay.
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #F95620 · accent2 #9E2C00 · Geist / Geist · radius 2px · space unit 8px (full list in design/tokens.json)

Do

  • Set the headline across all 12 columns at step 6, two or three lines, so the video window starts inside the first screen.
  • Put the 21:9 video window in 5–12 directly under the headline, with the style's radius.
  • Sit the subhead and one CTA in 1–4, vertically centred on the video.
  • Autoplay muted and looping; click opens the full video with sound and controls.

Don't

  • Don't add a play-button overlay on the autoplaying loop (only on the reduced-motion poster).
  • Don't use a 16:9 or square window; the wide 21:9 crop is the pattern.
  • Don't add a second CTA.

Phone width

  • Headline (step 6), video at 16:9 full width, then subhead and CTA.

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
● 0:42