Hero
Introduce a page with a headline, description, and actions.
Preview
Import
import { Hero } from "@sigil-ui/components";Usage
<Hero title="Build with shared design tokens" description="Choose a preset and compose your interface." actions={[{ label: "Get started", href: "/docs/installation" }]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | Headline text. |
description | ReactNode | — | Supporting description text. |
actions | HeroAction[] | — | CTA action buttons. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | Primary |
--s-primary-contrast | Primary contrast |
--s-primary-hover | Primary hover |
--s-shadow-sm | Shadow sm |
--s-surface | Surface |
--s-text | Text |
--s-border | Border |
--s-surface-elevated | Surface elevated |
--s-hero-padding-y | Hero padding y |
--s-hero-padding-x | Hero padding x |
--s-page-margin | Page margin |
--s-hero-min-height | Hero min height |