Hero Section
Compose a complete introductory section with visual content.
Preview
Import
import { HeroSection } from "@sigil-ui/components";Usage
<HeroSection title="Build faster" description="A token-driven design system for modern React apps." />Props
| Prop | Type | Default | Description |
|---|---|---|---|
badge | ReactNode | — | Badge configuration. |
title (required) | ReactNode | — | Heading displayed in the component. |
description | ReactNode | — | Supporting text below the heading. |
actions | HeroAction[] | — | Actions configuration. |
installCommand | string | — | Install Command configuration. |
media | ReactNode | — | Media configuration. |
align | "left" | "center" | — | Align configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-hero-padding-y | Hero padding y |
--s-hero-min-height | Hero min height |
--s-content-max | Content max |
--s-hero-padding-x | Hero padding x |
--s-page-margin | Page margin |
--s-hero-badge-gap | Hero badge gap |
--s-font-display | Font display |
--s-heading-weight | Heading weight |
--s-hero-title-size | Hero title size |
--s-heading-tracking | Heading tracking |
--s-text | Text |
--s-hero-title-max-width | Hero title max width |