Hero Sections
Centered Hero
A centred headline, sub-copy and a pair of CTAs under an eyebrow badge - the default landing hero.
#hero#centered#cta
6 frameworksBeginner
Loading…
A muted looping video behind a scrim, with a poster fallback and no autoplay for reduced-motion users.
<!--
Four things make a background video legal rather than merely pretty:
1. muted - autoplay without it is blocked by every browser anyway.
2. playsinline - without it iOS hijacks the page into fullscreen playback.
3. poster - the first paint, the fallback on a slow connection, and what the
reduced-motion user sees instead of the video. It is not a placeholder.
4. the scrim - a video is arbitrary moving pixels. There is no colour you can
give the headline that survives a cut to a white frame. The scrim is the
only reason the text has a contrast ratio at all.
The video is aria-hidden and has no controls: it is decoration, and a
decorative element must not be a tab stop.
-->
<section class="hero-video">
<video
class="hero-video__media"
autoplay
muted
loop
playsinline
preload="none"
poster="/media/hero-poster.jpg"
aria-hidden="true"
tabindex="-1"
>
<source src="/media/hero.webm" type="video/webm" />
<source src="/media/hero.mp4" type="video/mp4" />
</video>
<div class="hero-video__scrim" aria-hidden="true"></div>
<div class="hero-video__content">
<p class="hero-video__kicker">Field tested</p>
<h1 class="hero-video__title">Built for the days it all goes wrong</h1>
<p class="hero-video__copy">
Uptime you can point at, support that answers, and a rollback that takes
one click.
</p>
<a class="hero-video__cta" href="#">Watch the tour</a>
</div>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | - | Heading text for the card. |
kicker | string | - | Small label shown above the title. |
copy | string | - | Body text shown under the title. |
ctaLabel | string | 'Watch the tour' | Call-to-action button text. |
ctaHref | string | '#' | Destination for the call-to-action link. |
className | string | - | Additional classes merged onto the root element. |
Four attributes are load-bearing, not stylistic. `muted` - autoplay is blocked without it anyway. `playsinline` - without it iOS hijacks the page into fullscreen playback. `poster` - the first paint, the slow-connection fallback, and what a reduced-motion user sees instead of the video. And the scrim at `black/60` - a video is arbitrary moving pixels, and there is no colour you can give a headline that survives a cut to a white frame. Size the scrim for the worst frame, not the average one. The video is `aria-hidden` with `tabindex="-1"` and no controls: it is decoration, and decoration must not be a tab stop. Note that `motion-reduce:hidden` alone is not enough - CSS can hide a video but cannot pause it, and a hidden video keeps decoding frames and burning battery, which is why the React tabs pause it via `matchMedia`. Keep the file short and small; it is not content.