CTA Section
Call-to-action section with centered or split layout, headline, and action buttons.
Preview
Import
import { CTASection } from "@sigil-ui/components";Usage
<CTASection title="Build with a shared design system" description="Start with a preset, then make it your own." actions={[{ label: "Get started", href: "/docs/installation" }, { label: "Browse components", href: "/components", variant: "secondary" }]} />Split layout with media
<CTASection
variant="split"
title="See it in action"
description="Watch a 2-minute walkthrough."
actions={[{ label: "Watch demo", href: "/demo" }]}
media={<img src="/demo.png" alt="Demo" />}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | required | Headline text |
description | ReactNode | — | Supporting paragraph |
actions | CTAAction[] | — | Buttons ({ label, href?, onClick?, variant? }) |
variant | "centered" | "split" | "centered" | Layout mode |
media | ReactNode | — | Media element for split variant |
className | string | — | Additional CSS classes |
Plus all standard <section> HTML attributes.