CTA Blocks
High-converting call-to-action blocks for driving engagement, signups, and conversions. Multiple layouts and background styles.
Centered CTA - Default Background
Clean, focused CTA with centered copy and dual buttons. Default background for minimal distraction.
Ready to Get Started?
Join thousands of developers building exceptional experiences with our component library.
Centered CTA - Muted Background
Subtle background separation for sections. Great for breaking up long content.
Take Your Development Further
Access production-ready components, comprehensive documentation, and ongoing support.
Centered CTA - Primary Background
High-impact CTA with brand color background. Use sparingly for maximum effect.
Transform Your Financial Future
Learn proven strategies to leverage debt effectively and build lasting wealth.
Centered CTA - Gradient Background
Subtle gradient for visual interest without overwhelming the message.
Unlock Premium Features
Get unlimited access to all components, templates, and exclusive tools.
Side-by-Side CTA - Image Right
Two-column layout with copy left, image right. Great for feature highlights and promotional sections.
Professional Development Training
Join our comprehensive training program and master the skills needed to excel in modern web development. Expert-led courses, hands-on projects, and career support.
Side-by-Side CTA - Image Left
Reversed layout with image left, copy right. Provides visual variety in multi-section pages.
Build Faster, Ship Smarter
Our component library gives you everything you need to create beautiful, accessible web applications in record time. Pre-built, customizable, and production-ready.
Banner CTA - Info Variant
Slim horizontal banner for in-content CTAs. Dismissible with localStorage persistence.
Banner CTA - Primary Variant
Eye-catching primary variant for important announcements or offers.
Newsletter CTA - Muted Background
Email capture CTA wrapping the NewsletterForm component. Optimized for conversions.
Newsletter CTA - Primary Background
High-impact newsletter CTA with primary background for maximum visibility.
Component Props
CTACentered
| Prop | Type | Required | Description |
|---|---|---|---|
title | string | Yes | Main headline text |
description | string | No | Description text below title |
primaryCTA | CTA | Yes | Primary call-to-action button |
secondaryCTA | CTA | No | Secondary call-to-action button |
background | string | No | "default", "muted", "primary", "gradient" (default: "default") |
padding | string | No | "sm", "md", "lg" (default: "md") |
CTASideBySide
| Prop | Type | Required | Description |
|---|---|---|---|
title | string | Yes | Main headline text |
description | string | No | Description text below title |
primaryCTA | CTA | Yes | Primary call-to-action button |
image | string | No | Image URL (600×450 recommended) |
imageAlt | string | No | Image alt text for accessibility |
imagePosition | string | No | "left", "right" (default: "right") |
background | string | No | "default", "muted" (default: "muted") |
CTABanner
| Prop | Type | Required | Description |
|---|---|---|---|
text | string | Yes | Banner message text |
ctaText | string | Yes | CTA button text |
ctaHref | string | Yes | CTA button href |
variant | string | No | "info", "primary", "secondary" (default: "info") |
dismissible | boolean | No | Enable dismiss button (default: true) |
id | string | No | Unique ID for localStorage persistence |
CTANewsletter
| Prop | Type | Required | Description |
|---|---|---|---|
title | string | No | Main heading text (default: "Stay Informed") |
description | string | No | Description text below title |
placeholder | string | No | Email input placeholder (default: "Enter your email") |
buttonText | string | No | Submit button text (default: "Subscribe") |
background | string | No | "default", "muted", "primary" (default: "muted") |
showConsent | boolean | No | Show GDPR consent checkbox (default: true) |
action | string | No | Form submission endpoint |
apiKey | string | No | API key for form service |
Note: CTA type is { text: string; href: string }.
All CTAs support additional CSS classes via the class prop.