Numbered List CTA
A persuasive, structured conversion section: a heading followed by a list of reasons, each paired with a large stylized ordinal ("01", "02", "03"), ending in a call-to-action button pair.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/numbered-reasons-cta.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/cta/cta43.tsx instead.
Usage
The file also exports cta43Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Cta43, cta43Demo } from "@/components/blocks/cta/cta43"; export default function Page() { return <Cta43 {...cta43Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | none | Small label above the heading. |
| heading | ReactNode | none | Main call-to-action heading. |
| reasons | Reason[] | none | Numbered reasons, each with a title and supporting text. |
| primaryCta | CtaLink | none | Primary action button, label and destination. |
| secondaryCta | CtaLink | none | Optional secondary action button. |
| className | string | none | Extra classes for the outer section element. |
Types
interface Reason { title: string; text: string; } interface CtaLink { label: string; href: string; }
Behavior notes
- Ordinals ("01", "02", ...) are derived from each reason's array index at render time via `padStart`, not stored as data, so the list always renders in order with no gaps.
- Fully static: the reasons list and both buttons are decorative, no client-side state.
- Secondary button only renders when secondaryCta is provided.
More CTA Blocks
View all →centered-newsletter-cta
Centered Newsletter CTA
Minimal centered call-to-action with heading, description, and action buttons.
split-layout-newsletter-cta
Split Layout Newsletter CTA
Two-column call-to-action with a decorative image on one side and a feature list plus subscribe form on the other.
newsletter-social-proof-cta
Newsletter CTA with Social Proof
Newsletter call-to-action with an avatar stack, subscriber count, and a testimonial quote.
banner-cta
Banner CTA
Horizontal banner call-to-action with heading and action buttons side by side.
stats-cta
Stats CTA
Call-to-action section with impressive statistics and trust indicators above action buttons.
multi-card-cta
Multi-Card CTA
Three action cards side by side, each offering a different path to conversion.