Skip to main content

Call to Action Block

Prominent heading with description and action button to drive conversions.

Content Block

Preview

Default CTA

Primary button style

Ready to Get Started?

Join our community today and start your journey toward your fitness goals.

Book Your First Class

Outline CTA

Lighter button style

Have Questions?

We're here to help. Reach out to our team for more information.

Contact Us

Secondary CTA

Alternative button style

Try a Free Class

Experience our training firsthand with a complimentary trial session.

Claim Your Free Class

Statement 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 Class

Minimal CTA

Just heading and button

Start Training Today

Get Started

Properties

PropertyTypeDefaultDescription
headingstring-Main heading text
descriptionstring-Optional supporting text
buttonTextstring-Button label
buttonLinkstring-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