Back to site

CTA Center

Centered call-to-action with headline, supporting text, and buttons.

Ready to get started?

Launch a project in minutes with opinionated defaults that stay on-brand.

Start a trial 
---
import Button from "@core-elements/button/Button.astro";
import CtaCenter from "@page-sections/ctas/cta-center/CtaCenter.astro";
---

<CtaCenter
buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Start a trial",
      "variant": "primary",
      "size": "md",
      "link": "/start"
    }
  ]
} heading="Ready to get started?" subtext="Launch a project in minutes with opinionated defaults that stay on-brand."
/>
---
blocks:
  _component: page-sections/ctas/cta-center
  heading: Ready to get started?
  subtext: Launch a project in minutes with opinionated defaults that stay on-brand.
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Start a trial
      variant: primary
      size: md
      link: /start
---

Overview

Keeps messaging compact and focused in the middle of the page while aligning buttons under the copy, now with optional colorScheme and backgroundColor controls to match any theme.

Properties

heading string | default: Heading text

Headline for the CTA.

subtext string | default: Subtext placeholder text that will be replaced with actual content.

Supporting copy beneath the headline.

buttonSections array | default: array

Buttons for calls-to-action.

colorScheme enum | default: inherit

Color scheme theme for the CTA.

Accepted values:
  • inherit
  • default
  • contrast

backgroundColor enum | default: base

Background color for the CTA.

Accepted values:
  • none
  • base
  • surface
  • accent
  • highlight

rounded boolean | default: false

Add rounded corners to the CTA section.