Call to Action Block
Prominent heading with description and action button to drive conversions.
Content BlockPreview
Default CTA
Primary button style
Ready to Get Started?
Join our community today and start your journey toward your fitness goals.
Book Your First ClassOutline CTA
Lighter button style
Secondary CTA
Alternative button style
Try a Free Class
Experience our training firsthand with a complimentary trial session.
Claim Your Free ClassStatement Band
A full-width panel in your theme's band colors
Your First Class Is on Us
Come and try. No membership, no pressure, no experience needed.
Book a Free ClassMinimal CTA
Just heading and button
Start Training Today
Get StartedProperties
| Property | Type | Default | Description |
|---|---|---|---|
heading | string | - | Main heading text |
description | string | - | Optional supporting text |
buttonText | string | - | Button label |
buttonLink | string | - | URL for button click |
buttonVariant | 'default' | 'outline' | 'secondary' | 'default' | Button style |
emphasis | 'band' | - | Sets the block as a statement band |
The Statement Band
Set emphasis to band and the block becomes a solid panel that spans the page, in the band colors from your theme.
Use it for the one thing you most want visitors to do. A band draws the eye, so a page with three of them has none.
If your theme has no band colors set, the band falls back to your text color with your background color on top, which still reads as a deliberate panel.
Learn more in Style Your Site.
Usage
<CtaBlock
content={{
heading: 'Ready to Transform?',
description: 'Join thousands of students who have achieved their goals.',
buttonText: 'Start Now',
buttonLink: '/book',
buttonVariant: 'default',
}}
/>
Best Practices
- Clear call to action - Tell users exactly what to do
- Create urgency - Use action-oriented language
- One CTA per section - Don't overwhelm with choices
- Place strategically - After key content or at page end