CTA banner

The Call to Action (CTA) banner component highlights a message and action, designed to encourage conversion. It supports custom background and text colors, headline and body copy, and a call-to-action button.

Default

Ready to get started?

Let's talk

<CTABanner
  headline="Ready to get started?"
  body="Let's talk"
  buttonVariant="outlined"
  buttonText="Try for free"
  buttonLink="/contact/"
/>

Variants

You can customize the background, text color, headline, body text, and call-to-action label.

Integrate messaging today

Ship in minutes rather than months

<CTABanner
  bgColor="bg-gray-100"
  hoverBgColor="hover:bg-gray-200"
  textColor="text-gray-900"
  headline="Integrate messaging today"
  body="Ship in minutes rather than months"
  buttonVariant="colored"
  buttonText="Explore docs"
  buttonLink="/docs/"
/>

Integrate messaging today

Ship in minutes rather than months

<CTABanner
  hoverBgColor="hover:bg-pink-900"
  headline="Integrate messaging today"
  body="Ship in minutes rather than months"
  buttonVariant="custom"
  buttonClassName="bg-pink-500 hover:bg-pink-800 text-white"
  buttonText="Explore docs"
  buttonLink="/docs/"
/>

Usage

The CTA banner component can be referenced using the following format:

import CTABanner from "../../components/CTABanner";