Hero
Hero section with headline, description, and CTA action buttons.
Preview
Import
import { Hero } from "@sigil-ui/components";Usage
<Hero title="Build faster with Sigil" />With description and actions
<Hero
title="Ship beautiful interfaces"
description="A token-driven design system that adapts to any brand in one command."
actions={[
{ label: "Get Started", href: "/docs", variant: "primary" },
{ label: "View on GitHub", href: "https://github.com", variant: "secondary" },
]}
/>Ghost action style
<Hero
title="Minimal hero"
actions={[{ label: "Learn more", href: "#", variant: "ghost" }]}
/>With children
<Hero title="Custom content below">
<div className="mt-8">
<img src="/hero-visual.png" alt="Visual" />
</div>
</Hero>Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | Headline text |
description | ReactNode | — | Supporting description |
actions | HeroAction[] | — | CTA buttons ({ label, href?, variant?, onClick? }) |
children | ReactNode | — | Additional content below actions |
className | string | — | Additional CSS classes |