Hero canvas blocks

Reference for Page Editor → Hero blocks. Each ships as a full-width section with row/column shell—optimized for first-screen impact.

Core architecture & fields

Block	Media source	Primary traits
Hero Image	Background Media image	Layout (standard, fullscreen, split left/right), overlay, viewport sizing, object-fit
Hero Portfolio	Portfolio collection	Same shell as Hero Image; media from collection hero rules
Hero Video	Media video	Viewport aspect presets, poster, layout modes, overlay
Glassmorphism Hero	Background image/video	Frosted glass panel, backdrop blur, headline/CTA in glass layer
Hero Slider	Per-slide Media	Full-viewport slider; hero preset; slide CTAs; autoplay and navigation

Hero Image

Full-width header centered on one high-impact still.

Attributes include:

• Background image from Media.
• Layout — standard 16:9 band, fullscreen (100vh), split image left/right.
• Overlay toggle and copy styling on supported templates.
• Object fit and max height/width controls via shared hero sizing traits.

Hero Portfolio

Same structural shell as Hero Image, but the visual is driven by a selected Portfolio collection (cover/hero behavior from portfolio metadata).

Attributes include:

• Portfolio picker.
• Layout and overlay options aligned with Hero Image.

Best for: collection launch pages where the gallery brand leads the fold.

Hero Video

High-impact video-first hero with streaming-friendly layout.

Attributes include:

• Video and poster from Media.
• Viewport aspect presets for the hero band.
• Layout modes parallel to Hero Image (including fullscreen).

Glassmorphism Hero

Background asset (image or video) with a glassmorphism content panel (backdrop blur, translucent surface).

Attributes include:

• Background Media selection.
• Glass panel copy and CTA region inside the block structure.

Best for: premium brand sites with readable text over busy imagery.

Hero Slider

Full-page hero carousel using the swiper-based slider model with hero context only on this block (distinct from the in-column Slider block).

Attributes include:

• Multiple slides with Media images or video per slide.
• Preset: hero — full width, viewport height options (e.g. 100vh).
• Per-slide headlines, subcopy, and CTA links where enabled in slider traits.
• Autoplay, navigation, and object-fit per slider configuration.

Best for: multi-campaign homepages or rotating featured projects.

System restrictions & guardrails

• Use Hero Slider for viewport heroes; use Slider (Sliders category) inside content columns—not interchangeable.
• Fullscreen heroes affect mobile safe areas—always preview Mobile in the editor.
• Hero video should be short and compressed; provide a poster for fast first paint.

Verifying your setup

• Hero displays intended Media or Portfolio on draft and live preview.
• Glassmorphism and split layouts remain readable on mobile.
• Hero Slider advances slides and links resolve correctly.