Cta
Call-to-action band — quiet hairline-bordered section with title, description, and centered actions. Replace demo content before shipping.
Category: layout · WCAG 2.1-AA · section, cta, marketing
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | Primary heading of the CTA band |
description | ReactNode | — | Supporting text below the title |
actions | ReactNode | — | Buttons or links centered below the description |
headingLevel | 1 | 2 | 3 | 2 | HTML heading level for document outline control |
Design tokens
--cascivo-color-border--cascivo-surface-subtle--cascivo-text-2xl--cascivo-text-base--cascivo-font-bold--cascivo-text-secondary--cascivo-space-*
When to use
- A call-to-action band with title, description, and centered actions
- Prompting conversion between or after marketing sections
When not to use
- The primary page intro — use Hero
- General content grouping — use Section
Examples
CTA band
Quiet bordered band with centered heading, description, and action buttons
<Cta title="Ready to ship?" description="Add Cascade to your project in minutes." actions={<><Button>Get started</Button><Button variant="ghost">View on GitHub</Button></>} />