Hero
Page hero section — centered or split layout with eyebrow, title, description, actions and media slots. Replace demo content before shipping.
Category: layout · WCAG 2.1-AA · section, hero, marketing
Variants
- centered
- split
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "centered" | "split" | "centered" | Layout variant: centered (single column) or split (two columns) |
title | ReactNode | — | Primary heading content |
eyebrow | ReactNode | — | Small monospace label above the title |
description | ReactNode | — | Supporting paragraph below the title |
actions | ReactNode | — | Buttons or links rendered in a row below the description |
media | ReactNode | — | Right-hand slot in the split variant (image, demo, code block) |
headingLevel | 1 | 2 | 3 | 1 | HTML heading level for document outline control |
Design tokens
--cascivo-text-4xl--cascivo-text-lg--cascivo-text-sm--cascivo-font-mono--cascivo-font-bold--cascivo-text-secondary--cascivo-space-*
When to use
- The primary page intro with eyebrow, title, description, actions, and media
- Landing-page tops in centered or split layout
When not to use
- An application page top — use PageHeader
- A mid-page conversion prompt — use Cta
Examples
Centered hero
Single-column hero with eyebrow, headline, description, and CTA buttons
<Hero eyebrow="v8 — Assembly Included" title="Ship the dashboard your ops team deserves" description="Cascade gives you charts, layouts and sections — fully composed, copy-paste ready." actions={<><Button>Get started</Button><Button variant="ghost">View docs</Button></>} />Split hero
Two-column layout with copy on the left and media on the right
<Hero variant="split" title="Signal-driven, CSS-native" description="Fine-grained reactivity with zero re-renders. Beautiful by default." actions={<Button>Start building</Button>} media={<img src="/preview.png" alt="Dashboard preview" />} />Related components
- PageHeader — Use for app pages rather than marketing landings
- Cta — Reinforce the hero with a CTA band later on the page