CTA Band

Call to Action

Full-width call-to-action strip with headline, supporting text, and 1-2 action buttons. Typically placed between content sections or at page bottom.

Code Example

<section className="border-t bg-card py-20">
  <div className="max-w-2xl mx-auto px-6 text-center">
    <h2 className="text-3xl font-bold mb-4">Ready to Get Started?</h2>
    <p className="text-muted-foreground mb-8">
      Join the next generation of regenerative capital.
    </p>
    <div className="flex gap-3 justify-center">
      <Button size="lg">Primary Action</Button>
      <Button size="lg" variant="outline">Learn More</Button>
    </div>
  </div>
</section>

Variants (2)

Centered

Centered text with buttons below

alignment= "center"background= "accent"

Split

Text left, button right on a single line

alignment= "split"background= "surface"

Guidelines

Do

Use contrasting background (accent surface or brand color)
Keep copy to headline + 1 sentence
Center-align content
Use primary brand CTA style for the button

Don't

Include more than 2 buttons
Place form fields inside the band (use a modal or separate page)
Use the same background as adjacent sections
Stack more than 2 CTAs on the same page

Use Cases

End-of-page conversion section
Between content sections for engagement
Newsletter signup prompt
Investment inquiry prompt (PRT)

Details

Category: Call to Action
Reference Component: CTABand
Variants: 2
Guidelines: 4 dos, 4 donts

Back to all patterns