Drop structured CTAs between sections to reinforce the next step.
CTA Split
Side-by-side CTA with copy on one side and stacked buttons on the other.
Keep your team aligned
---
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-docs/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-docs/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 #
sectionLabel string
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-docs/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.