Back to site

CTA Split

Side-by-side CTA with copy on one side and stacked buttons on the other.

Keep your team aligned

Drop structured CTAs between sections to reinforce the next step.

Create workspace Invite team
Sunset. 
---
import Button from "@core-elements/button/Button.astro";
import CtaSplit from "@page-sections/ctas/cta-split/CtaSplit.astro";
---

<CtaSplit
buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Create workspace",
      "variant": "primary",
      "size": "md",
      "link": "/workspace"
    },
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Invite team",
      "variant": "secondary",
      "size": "md",
      "link": "/invite"
    }
  ]
} heading="Keep your team aligned" imageAlt="Sunset." imageSource="/src/assets/images/component-library/sunset.jpg" subtext="Drop structured CTAs between sections to reinforce the next step."
/>
---
blocks:
  _component: page-sections/ctas/cta-split
  heading: Keep your team aligned
  subtext: Drop structured CTAs between sections to reinforce the next step.
  imageSource: /src/assets/images/component-library/sunset.jpg
  imageAlt: Sunset.
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Create workspace
      variant: primary
      size: md
      link: /workspace
    - _component: building-blocks/core-elements/button
      text: Invite team
      variant: secondary
      size: md
      link: /invite
---

Overview

Use when you need the headline and supporting text to stay readable while giving the buttons their own column, with colorScheme and backgroundColor props to blend into different sections.

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.

imageSource string | default: /src/assets/images/component-library/dunedin-cliff.jpg

Image displayed alongside the CTA content.

imageAlt string | default: CTA image

Alt text describing the CTA image.

buttonSections array | default: array

Buttons for calls-to-action.

reverse boolean | default: false

Reverse the order so buttons appear before the copy.

colorScheme enum | default: default

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.