Hero section: slides and content boxes

Build any hero layout — card over image, editorial text on media, multiple text clusters — from slides, content boxes, and shared content blocks.

The Hero is a full-width media canvas, composed in three layers:

Hero (height, carousel)
└── Slide (desktop/mobile image or video, whole-slide link)
    └── Content box (position on the canvas, color scheme, backdrop)
        └── Text / Button / Group / ... (the content itself)

Hero section settings

Setting	Options	Default	Notes
Height	Small / Medium / Large	Medium	Small ≈ 45% of the viewport, Medium ≈ 80%. Large fills the viewport exactly below the header and announcement bar — the classic full-screen opener

With more than one slide, arrows and dot indicators appear automatically and the hero becomes a swipeable carousel (up to 5 slides).

Slide settings

A slide owns the media and nothing else — content lives in its boxes.

Setting	Notes
Desktop image	The base image. Also used as the video poster when a video is set
Mobile image	Optional portrait crop shown on small screens instead of the desktop image
Video	Autoplays muted on a loop and replaces the images
Mobile video	Optional; plays instead of the desktop video on small screens
Link	Makes the whole slide clickable. Buttons inside content boxes stay on top and keep their own links

The first slide is treated as the page's main image: it loads eagerly and is preloaded for the fastest possible first paint. Keep its media well-compressed.

Content box settings

A content box is a positioned cluster. A slide can hold several boxes, each anchored independently — that's how you get a headline top-left and a caption bottom-left on the same image.

Setting	Options	Default	Notes
Horizontal position	Left / Center / Right	Left
Vertical position	Top / Middle / Bottom	Middle	Nine anchor spots in total
Color scheme	any scheme	Scheme 1	Colors the text (and the backdrop, when on)
Text backdrop	on / off	off	Paints the box with the scheme's background color, card-style

Inside the box, add any content blocks. Blocks stack vertically with consistent spacing; use a Group for side-by-side arrangements.

Recipes

Classic card hero (Glossier-style) Slide → one Content box (Left / Middle, backdrop on) → Text (Eyebrow) + Text (Display) + Text (Normal) + Button.

Editorial text-on-media (Even Realities-style) Slide → one Content box (Right / Middle, backdrop off, a light-on-dark scheme) → Text (Display) + Text (Normal) + Button (Secondary).

Two independent clusters Slide → Content box (Left / Top, backdrop off) with a Display text, plus a second Content box (Left / Bottom) with a small Normal text. Headline up top, supporting caption pinned to the bottom.

Media-only slide Slide with images/video, a Link, and no boxes at all — the entire slide becomes the click target.

Adding a Slide or a Content box from the picker starts you with a pre-assembled example (text + button) rather than an empty shell — edit or delete the pieces you don't need.

Announcement bar section

Stories section