Three Color Variants
Primary, secondary, and accent backgrounds to match your page design.
End Every Page with Purpose
CTA blocks turn browsers into customers. Pick a color, write your copy, and watch conversions climb.
Three Variants, One Goal
Every page needs a clear next step. That's where CTABlock comes in. Choose a color variant that fits your page context, write compelling copy, and give visitors an obvious path forward.
Let's see each variant in action.
1. Primary Variant
Best for: Main CTAs, homepage sections, high-priority actions
Uses your brand's primary color to grab attention. Perfect for the most important conversion points on your site.
Ready to Get Started?
Join thousands of businesses already using our platform to grow faster and smarter.
Show Code Example
<CTABlock
heading="Ready to Get Started?"
description="Join thousands of businesses already using our platform..."
buttonText="Start Free Trial"
buttonHref="/contact"
buttonText2="Schedule Demo"
buttonHref2="/about"
variant="primary"
/>2. Secondary Variant
Best for: Mid-page CTAs, resource downloads, newsletter signups
Neutral background that doesn't compete with surrounding content. Works great for lower-friction conversions.
Want More Tips Like This?
Subscribe to our newsletter for weekly insights, case studies, and actionable strategies.
Show Code Example
<CTABlock
heading="Want More Tips Like This?"
description="Subscribe to our newsletter for weekly insights..."
buttonText="Subscribe Now"
buttonHref="/contact"
buttonText2="View Archive"
buttonHref2="/about"
variant="secondary"
/>3. Accent Variant
Best for: Limited-time offers, announcements, special promotions
Uses your accent color to create urgency and excitement. Perfect for time-sensitive calls to action.
Limited Time: 50% Off Annual Plans
Don't miss out! Upgrade now and save hundreds on your first year. Offer ends this Friday.
Show Code Example
<CTABlock
heading="Limited Time: 50% Off Annual Plans"
description="Don't miss out! Upgrade now and save hundreds..."
buttonText="Claim Discount"
buttonHref="/contact"
buttonText2="Learn More"
buttonHref2="/about"
variant="accent"
/>Additional Layout Options
Text Alignment
Default: Centered text
Option: Left-aligned with centered=
<CTABlock
heading="..."
centered=
/>Full Width
Default: Contained section
Option: Full-width with fullWidth=true
<CTABlock
heading="..."
fullWidth=true
/>Single Button
Just omit buttonText2 and buttonHref2 for a single CTA:
<CTABlock
heading="Simple Call to Action"
description="One clear next step."
buttonText="Get Started"
buttonHref="/contact"
variant="primary"
/>CTA Block Features
Flexible Layouts
Centered or left-aligned text, full-width or contained sections.
Dual CTAs
Primary and secondary buttons for multiple conversion paths.
Dark Mode Ready
All variants adapt beautifully to light and dark themes.
Mobile Optimized
Buttons stack vertically on mobile for easy tapping.
Zero JavaScript
Pure CSS with no runtime dependencies for fast loading.
Start Using CTA Blocks Today
Add them to landing pages, blog posts, or anywhere you need a clear next step.