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

backgroundImage object

Background image configuration for the CTA.

Properties:

source string

URL or path to the background image.

alt string

Alt text for the background image.

positionVertical enum

Vertical position of the background image.

Accepted values:
  • top
  • center
  • bottom

positionHorizontal enum

Horizontal position of the background image.

Accepted values:
  • left
  • center
  • right

overlay enum | default: none

Overlay applied over the background image for text readability.

Accepted values:
  • none
  • light
  • dark

rounded boolean | default: false

Add rounded corners to the CTA section.