Layered hero
A full-width hero with a heavily blurred image or video filling the background and a sharp image or video centered on top of it, with optional text content layered over both. Not available in the header, drawers, or popups.
Blurred media
Section titled “Blurred media”- Video — an optional video shown in the blurred background instead of the image, when set.
- Image — the image shown in the blurred background (used when no video is set). When neither is set, the main media is used.
- Blur amount — how strongly the background is blurred: Small, Medium, or Large. Default Medium.
- Opacity — how visible the blurred background is, from 0% to 100%. The section’s color scheme shows through as it fades. Default 100%.
Main media
Section titled “Main media”- Video — an optional video shown instead of the image, when set. Plays muted on a loop.
- Image — the image shown in the center of the hero (used when no video is set).
- Size — how much of the hero the main media can fill: Small, Medium, or Large. It scales down to fit both the width and height of the hero. Default Medium.
- Size (mobile) — the same options, used on smaller screens. Default Medium.
- Aspect ratio — 16:9, 4:3, 1:1, 4:5, 3:4, 2:3, or Auto (matches the media’s own shape). Default 4:5.
- Opacity — how visible the main media is, from 0% to 100%. Default 100%.
Layout
Section titled “Layout”- Height — how tall the section is: X-small (16rem), Small (20rem), Medium (30rem), Large (40rem), X-large (50rem), or Full height (fills the screen). Default Large.
- Height (mobile) — the same options, used on smaller screens. Default Medium.
Content
Section titled “Content”- Horizontal alignment — Left, Center, or Right alignment of the text content. Default Center.
- Vertical alignment — Top, Middle, or Bottom alignment of the text content. Default Middle.
- Max width — caps how wide the text content area can grow: Medium, Large, X-large, 2X-large, 3X-large, 4X-large, 5X-large, or None. Default 2X-large.
Section settings
Section titled “Section settings”- Color scheme — the overall section color scheme. Default Scheme 1.
- Spacing — where padding is applied: Bottom, Top, Top and bottom, or None. Default None.
- Spacing size — how much padding: Base, Small, or X-small. Default Base.
- Include header offset — offsets the section by the height of the header, in addition to the top padding. Default off.
Blocks
Section titled “Blocks”- Heading, Scrolling heading, Subheading, Rich text, Button, Countdown — see Shared content blocks.
- Also supports app blocks.