In Athletic Sport
hero.video-fullscreen · hero
Open alone, full size (desktop, tablet, phone; layout tree included)
Hero library · video
Full-screen video with band
hero.video-fullscreen: any design can use this hero. It suits the styles below; pairing it with another style makes the picker warn about a clash.
- Rule
- A muted looping video fills the viewport; a pause control sits top-right; a solid accent band across the bottom carries the headline (1–8) and one CTA (10–12).
- Slots
heroImage,cta2,headline,cta- Grid
- video
full· pause11-12· headline1-8· cta10-12 - Notes
- Video: <video autoplay muted loop playsinline preload="metadata" poster=...>, ≤ 6 MB, 8–15 s loop, no sound. A visible Pause button is required (WCAG 2.2.2). Under prefers-reduced-motion show the poster frame and do not autoplay. Lazy-load the source after first paint.
Do
- Fill the viewport (100svh) with a muted, looping, playsinline video and a poster image.
- Show a Pause/Play control top-right at all times.
- Run a solid accent band across the bottom with the headline (onAccent) in 1–8 and one CTA in 10–12.
- Respect prefers-reduced-motion: show the poster frame, no autoplay.
Don't
- Don't put text directly on the moving video.
- Don't autoplay sound or use a video longer than 15 s per loop.
- Don't block first paint on the video file; load it after the poster.
Phone width
- Video at 9:16 or 4:5 crop (serve a smaller file), then the band below with headline and full-width CTA.
- Keep the pause control.
Live, in 3 styles it suits
In Luxury Fashion
hero.video-fullscreen · hero
Open alone, full size (desktop, tablet, phone; layout tree included)
We make complicated companies simple to choose
Start a projectWe make complicated companies simple to choose
Start a projectIn Synthwave Retro-Future
hero.video-fullscreen · hero
Open alone, full size (desktop, tablet, phone; layout tree included)