Hero Landing
A cinematic full-screen hero with a background image or video, headline, and scroll indicator.
Hero Landing
A cinematic full-screen hero designed for landing pages. It layers a headline and subtitle over a full-bleed background (image, gradient, or video) and includes an optional scroll indicator label at the bottom to encourage visitors to explore further.
Adding in Strapi
- Go to Content Manager > Pages > select your page
- In the Design dynamic zone, click "Add component"
- Select "Heroes" > "Hero Landing"
- Enter a title and subtitle, then configure the background
- Optionally add CTA buttons and a scroll indicator label
- Save and publish
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| title | String | No | Main headline text |
| subtitle | String | No | Secondary text below the title |
| background | Component | No | Background styling (color, image, gradient, or video) |
| buttons | Component (repeatable) | No | CTA buttons displayed below the subtitle |
| scrollIndicatorLabel | String | No | Label text for the scroll indicator at the bottom (default "Scroll") |
Variants
Default
The standard landing hero with a bold headline centred over a background image. CTA buttons sit below the subtitle and a scroll indicator pulses at the bottom of the viewport.
Best for: Home pages and campaign landing pages where the hero should fill the entire screen.
LongText
Demonstrates how the layout handles longer headlines and subtitles. The text block expands while remaining vertically centred over the background.
DifferentImage
Shows the hero with an alternative background image to illustrate how different colour palettes and subjects affect readability.
Tips
- Choose a background image with a clear focal area that does not compete with the headline text.
- If the background is dark, use light text colours (and vice versa) to ensure readability.
- The
scrollIndicatorLabeldefaults to "Scroll" -- customise it to match your brand voice (e.g. "Explore" or "Discover More"). - Keep the title short and impactful -- one line works best on mobile screens.