Hero
Hero Cover
A full-bleed video or photo under a dark cover, the heading and buttons at the bottom, and figures with client quotes turning in glass cards.
Layout and motion from the Titen template — see it in contextBlocks come with Pro
Preview every block now, in any theme and at any width. The source, the install command and the AI prompt unlock when Pro opens, once the catalog reaches 20 templates.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| as | "h1" | "h2" | "h1" | Heading level — h2 for a band further down the page. |
| variant | "cover" | "band" | "cover" | "band": Titen's call to action — a photo band under a gradient to black, its height from the space around the text, the heading in text-h2 and one button. |
| align | "split" | "center" | "split" | "center": a project cover — the heading and meta line centred, the lead at the bottom (no aside). |
| title / lead | string | — | The heading (white, its words rising out of a blur after load) and the lead. |
| actions | { label, href }[] | Book a call, Our services | Filled white, then outlined white with the turning arrow; the band shows the first. |
| video | { src, poster? } | a Pexels clip | A muted loop under black at 75%; wins over image. Paused on its poster with reduced motion. |
| image | { src, alt? } | — | A photo instead, under black at 60% (the band: a gradient). Decorative unless it has alt text. |
| aside | { facts?, testimonials?, more? } | false | 2 figures, 3 quotes | The right column of the default cover: two figures, quotes changing every 4s in glass cards, and a link. false leaves it out (the heading and lead then sit at the two ends). |
| meta | { label, href? }[] | — | align="center": the line under the heading, the items split by a bar; an href makes one a link. |
| className | string | — | Classes for the <section>. |
- The cover is 810px tall from 768px and 900px from 1024px, and fits its content on phones with 150px on top for an overlay header (pair it with header-split overlay). The text sits at the bottom: beside the aside from 768px, at the two ends from 1024px.
- Motion from Titen: the heading's words rise out of a 7px blur 0.3s after load (text-appear), the lead follows at 0.4s and the buttons and aside at 0.65s (scroll-reveal); the quotes slide every 4s and pause under the pointer or focus (slideshow). With reduced motion the video stays on its poster and nothing moves.
- Text over the media is white in every theme. The band keeps Titen's: nothing moves there but the button.
