CTA Section

Drive a primary action with focused messaging.

Overview

CTA Section displays a call-to-action with title, description, and action buttons. Supports centered and split layouts with different background options (solid, gradient, muted).

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Props

• title - CTA title (optional)
• description - CTA description (optional)
• primaryCTA - Primary call-to-action button (optional)
• secondaryCTA - Secondary call-to-action button (optional)
• variant - Layout variant: "centered" | "split" (optional, default: "centered")
• background - Background type: "solid" | "gradient" | "muted" (optional, default: "solid")
• className - Additional CSS classes (optional)

CTAAction

• label - Button label (required)
• href - Link URL (optional)
• onClick - Click handler (optional)
• variant - Button variant: "solid" | "outline" | "ghost" (optional)
• action - Action identifier for analytics (optional)

Install

1

Accessibility

CTA section uses semantic HTML with proper heading hierarchy. Action buttons are keyboard accessible and follow button/link accessibility patterns. Compliant with WCAG 2.1.