Studiov0.6.0
Studio/Patterns/CTA Band

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