CTA Components
Showcase of all 9 call-to-action component variants for driving conversions.
Variant: simple
Basic centered CTA with heading, body text, and buttons.
{
"component": "cta",
"variant": "simple",
"data": {
"heading": "Simple CTA",
"body": "A clean, centered call-to-action perfect for page endings.",
"buttons": [
{ "text": "Get Started", "url": "#", "style": "primary" },
{ "text": "Learn More", "url": "#", "style": "outline-primary" }
],
"bg": "light"
}
}<section class="cta-card bg-light rounded p-4 p-lg-5 mx-3">
<div class="text-center">
<h3 class="mb-3">Simple CTA</h3>
<p class="text-dark-muted mb-4">A clean, centered call-to-action perfect for page endings.</p>
<div class="d-flex gap-2 justify-content-center flex-wrap">
<a href="#" class="btn btn-primary">Get Started</a>
<a href="#" class="btn btn-outline-primary">Learn More</a>
</div>
</div>
</section>Variant: border
White background with border. Button aligned to the right.
Border CTA
Clean bordered style with button on the right side.
{
"component": "cta",
"variant": "border",
"data": {
"heading": "Border CTA",
"body": "Clean bordered style with button on the right side.",
"buttons": [
{ "text": "Contact Us", "url": "#", "style": "primary" }
]
}
}<section class="cta-card border rounded p-4 p-lg-5 mx-3">
<div class="row align-items-center">
<div class="col-lg-9">
<h3 class="mb-3">Border CTA</h3>
<p class="text-dark-muted mb-0">Clean bordered style with button on the right side.</p>
</div>
<div class="col-lg-3 text-lg-end mt-3 mt-lg-0">
<a href="#" class="btn btn-primary">Contact Us</a>
</div>
</div>
</section>Variant: grey
Grey background with two buttons. Subtle but effective.
Grey Background CTA
Subtle grey background that stands out from white sections.
{
"component": "cta",
"variant": "grey",
"data": {
"heading": "Grey Background CTA",
"body": "Subtle grey background that stands out from white sections.",
"buttons": [
{ "text": "Primary Action", "url": "#", "style": "primary" },
{ "text": "Secondary", "url": "#", "style": "outline-dark" }
]
}
}<section class="cta-card bg-light rounded p-4 p-lg-5 mx-3">
<div class="row align-items-center">
<div class="col-lg-8">
<h3 class="mb-3">Grey Background CTA</h3>
<p class="text-dark-muted mb-3 mb-lg-0">Subtle grey background that stands out from white sections.</p>
</div>
<div class="col-lg-4 mt-3 mt-lg-0">
<a href="#" class="btn btn-primary me-2 mb-2">Primary Action</a>
<a href="#" class="btn btn-outline-dark mb-2">Secondary</a>
</div>
</div>
</section>Variant: dark-centered
Dark background with centered content. High contrast and impactful.
Dark Centered CTA
High contrast dark background draws attention to your message.
{
"component": "cta",
"variant": "dark-centered",
"data": {
"heading": "Dark Centered CTA",
"body": "High contrast dark background draws attention to your message.",
"buttons": [
{ "text": "Get Quote", "url": "#", "style": "gold" },
{ "text": "View Services", "url": "#", "style": "outline-light" }
]
}
}<section class="cta-card bg-dark text-white rounded p-4 p-lg-5 mx-3">
<div class="text-center">
<h3 class="mb-3 text-light-primary">Dark Centered CTA</h3>
<p class="lead text-light-muted mb-4">High contrast dark background draws attention to your message.</p>
<div class="d-flex gap-2 justify-content-center flex-wrap">
<a href="#" class="btn btn-brand-secondary mb-2">Get Quote</a>
<a href="#" class="btn btn-outline-light mb-2">View Services</a>
</div>
</div>
</section>Variant: brand-green
Uses the brand primary color. On-brand and distinctive.
{
"component": "cta",
"variant": "brand-green",
"data": {
"heading": "Brand Green CTA",
"body": "Uses the signature brand green for consistency.",
"buttons": [
{ "text": "Request Quote", "url": "#", "style": "gold" },
{ "text": "Call Us", "url": "#", "style": "outline-light" }
]
}
}<section class="cta-card bg-primary text-white rounded p-4 p-lg-5 mx-3">
<div class="text-center">
<h3 class="mb-3 text-light-primary">Brand Green CTA</h3>
<p class="text-light-muted mb-4">Uses the signature brand green for consistency.</p>
<div class="d-flex gap-2 justify-content-center flex-wrap">
<a href="#" class="btn btn-brand-secondary">Request Quote</a>
<a href="#" class="btn btn-outline-light">Call Us</a>
</div>
</div>
</section>Variant: split-image
Image on the left, content on the right. Visual storytelling.
{
"component": "cta",
"variant": "split-image",
"data": {
"heading": "Split Image CTA",
"body": "Combine compelling imagery with your call-to-action message.",
"image": "https://placehold.co/800x600/4F46E5/white?text=PageJSON",
"buttons": [
{ "text": "Learn More", "url": "#", "style": "primary" }
]
}
}<section class="cta-card bg-light rounded overflow-hidden mx-3">
<div class="row g-0">
<div class="col-lg-5">
<img src="https://placehold.co/800x600/4F46E5/white?text=PageJSON" alt="Split Image CTA" class="w-100 h-100" style="object-fit: cover; min-height: 300px;" loading="lazy">
</div>
<div class="col-lg-7 d-flex align-items-center">
<div class="p-4 p-lg-5">
<h3 class="mb-3">Split Image CTA</h3>
<p class="text-dark-muted mb-4">Combine compelling imagery with your call-to-action message.</p>
<div class="d-flex gap-2 flex-wrap">
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
</div>
</section>Variant: full-width
Edge-to-edge banner style. Maximum visual impact.
Full Width CTA
Edge-to-edge banner for maximum visibility and impact.
{
"component": "cta",
"variant": "full-width",
"data": {
"heading": "Full Width CTA",
"body": "Edge-to-edge banner for maximum visibility and impact.",
"buttons": [
{ "text": "Get Started Now", "url": "#", "style": "gold" }
],
"bg": "black"
}
}<section class="bg-black p-4 p-lg-5">
<div class="container-fluid px-4 px-lg-5">
<div class="row align-items-center">
<div class="col-lg-8">
<h2 class="mb-2 text-light-primary">Full Width CTA</h2>
<p class="mb-0 text-light-muted">Edge-to-edge banner for maximum visibility and impact.</p>
</div>
<div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
<a href="#" class="btn btn-brand-secondary btn-lg">Get Started Now</a>
</div>
</div>
</div>
</section>Variant: compact
Inline compact style. Great for smaller spaces or inline CTAs.
Compact CTA
A smaller, inline call-to-action for tighter spaces.
{
"component": "cta",
"variant": "compact",
"data": {
"heading": "Compact CTA",
"body": "A smaller, inline call-to-action for tighter spaces.",
"buttons": [
{ "text": "Subscribe", "url": "#", "style": "primary" }
]
}
}<section class="cta-card bg-light rounded p-3 p-lg-4 mx-3">
<div class="d-flex flex-column flex-md-row align-items-center justify-content-between gap-3">
<div>
<h5 class="mb-1">Compact CTA</h5>
<p class="text-dark-muted small mb-0">A smaller, inline call-to-action for tighter spaces.</p>
</div>
<div class="d-flex gap-2 flex-shrink-0">
<a href="#" class="btn btn-sm btn-primary">Subscribe</a>
</div>
</div>
</section>Variant: urgency
Limited time/urgency styling with optional badge. Creates FOMO.
{
"component": "cta",
"variant": "urgency",
"data": {
"heading": "Limited Time Offer",
"body": "Don't miss out on this exclusive opportunity. Act now!",
"badge": "Ends Soon",
"buttons": [
{ "text": "Claim Offer", "url": "#", "style": "gold" }
],
"bg": "black"
}
}<section class="cta-card bg-warning rounded p-4 p-lg-5 mx-3">
<div class="text-center">
<span class="badge bg-dark text-white mb-3">Ends Soon</span>
<h3 class="mb-3 text-dark">Limited Time Offer</h3>
<p class="text-dark mb-4" style="opacity: 0.85;">Don't miss out on this exclusive opportunity. Act now!</p>
<div class="d-flex gap-2 justify-content-center flex-wrap">
<a href="#" class="btn btn-black">Claim Offer</a>
</div>
</div>
</section>