CTA
Pair a focused message with a clear next action.
Preview
Import
import { CTA } from "@sigil-ui/components";Usage
<CTA title="Start building with Sigil" description="Choose a preset and compose your first page." actions={[{ label: "Read the setup guide", href: "/docs/installation" }]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | CTA headline. |
description | string | — | CTA supporting text. |
actions | CTAAction[] | — | Action buttons. |
variant | "centered" | "split" | centered | Layout variant. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-cta-padding-x | Cta padding x |
--s-page-margin | Page margin |
--s-cta-padding-y | Cta padding y |
--s-cta-border-radius | Cta border radius |
--s-card-radius | Card radius |
--s-border-style | Border style |
--s-border | Border |
--s-cta-bg | Cta bg |
--s-surface | Surface |
--s-cta-split-gap | Cta split gap |
--s-cta-description-max-width | Cta description max width |
--s-cta-title-size | Cta title size |