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.

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

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

buttonSections string | default: array

colorScheme string | default: inherit

backgroundColor string | default: base

rounded string | default: false