CTA Section
Close a page section with a message and action links.
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" }]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
title (required) | ReactNode | — | Heading displayed in the component. |
description | ReactNode | — | Supporting text below the heading. |
actions | CTAAction[] | — | Actions configuration. |
variant | "centered" | "split" | — | Selects a supported visual treatment. |
media | ReactNode | — | Media configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-cta-padding-y | Cta padding y |
--s-cta-max-width | Cta max width |
--s-content-max | Content max |
--s-cta-padding-x | Cta padding x |
--s-page-margin | Page margin |
--s-font-display | Font display |
--s-cta-title-size | Cta title size |
--s-heading-weight | Heading weight |
--s-heading-tracking | Heading tracking |
--s-text | Text |
--s-cta-description-gap | Cta description gap |
--s-cta-description-max-width | Cta description max width |