Hero — Video
Hire confidently
Build the team that builds your business
Content guidance
Usage
Two distinct heroes that share a schema. video_position
switches between them: "background" is a dark hero with
a full-bleed autoplay video behind the text; "center"
is a gradient hero with an embedded video box overlapping the
bottom edge.
Background variant
Dark Section (--base-strongest) with the video filling
the cell behind a 70% black overlay. Text is centered inverse
(white). A Play/Pause toggle sits bottom-right when JS is loaded
and a video src is present. Respects
prefers-reduced-motion — does not autoplay when the
user opts out.
Center variant
Gradient bg using the active theme's
--expressive-primary-stronger →
--expressive-primary-strongest. Eyebrow inherits
--expressive-primary-weaker. An embedded video box
(16:9) overlaps the bottom edge by ~4.5–6.5rem, with rounded
corners.
v4 simplifications
Swampjs's ResponsiveVideo (desktop/tablet/mobile
variants) and VideoEmbed (Wistia) are replaced with a
plain <video> element. Content shape collapses
from a deep video-source object to a flat
{ src, poster, alt }. The interaction surface
(play/pause, reduced-motion) is preserved.
Variants
Video position
video_position="background" Hire confidently
Build the team that builds your business
video_position="center" Hire confidently
Build the team that builds your business
With secondary button
Hire confidently
Build the team that builds your business
Content model
| Field | Type | Choices / Reference | Default | Required | Multi | ||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Eyebrow (h1) | Text | — | yes | — | |||||||||||||||||||||||||||||||||||||||||||
| Heading | Rich text | Asset | — | — | — | ||||||||||||||||||||||||||||||||||||||||||
| Description | Rich text | Asset | — | — | — | ||||||||||||||||||||||||||||||||||||||||||
| Primary CTA | Global field | cta | — | — | — | ||||||||||||||||||||||||||||||||||||||||||
global_field: cta
| |||||||||||||||||||||||||||||||||||||||||||||||
| Secondary CTA | Global field | cta | — | — | — | ||||||||||||||||||||||||||||||||||||||||||
global_field: cta
| |||||||||||||||||||||||||||||||||||||||||||||||
| Video Position | Dropdown | background, center | background | — | — | ||||||||||||||||||||||||||||||||||||||||||
| Video | Global field | responsive_video | — | — | — | ||||||||||||||||||||||||||||||||||||||||||
global_field: responsive_video
| |||||||||||||||||||||||||||||||||||||||||||||||
| Video | Reference | embedded_video | — | — | — | ||||||||||||||||||||||||||||||||||||||||||