Feature Split

Split layout that pairs narrative content with a focused feature list.

Launch playbook

Guide every release with accountable workflows

Pair the story of your launch with concrete capabilities—so execs get the narrative while implementers see the proof.

---
import FeatureSplit from "@features/feature-split/FeatureSplit.astro";
---

<FeatureSplit
buttonSections={
  [
    {
      "text": "Book a live tour",
      "variant": "primary",
      "size": "md",
      "link": "/demo"
    },
    {
      "text": "Download brief",
      "variant": "secondary",
      "size": "md",
      "link": "/brief.pdf"
    }
  ]
} eyebrow="Launch playbook" heading="Guide every release with accountable workflows" imageAlt="Product team reviewing plans together" imageRounded imageSource="/src/assets/images/component-library/dunedin-cliff.jpg" reverse subtext="Pair the story of your launch with concrete capabilities—so execs get the narrative while implementers see the proof."
/>

---
blocks:
  _component: page-sections/features/feature-split
  eyebrow: Launch playbook
  heading: Guide every release with accountable workflows
  subtext: Pair the story of your launch with concrete capabilities—so execs get the narrative while implementers see the proof.
  reverse: true
  buttonSections:
    - text: Book a live tour
      variant: primary
      size: md
      link: /demo
    - text: Download brief
      variant: secondary
      size: md
      link: /brief.pdf
  imageSource: /src/assets/images/component-library/dunedin-cliff.jpg
  imageAlt: Product team reviewing plans together
  imageRounded: true
---

Overview

Ideal when you need to tell a story on one side and reinforce it with specific capabilities on the other. Feature Split keeps copy, CTAs, media, and feature highlights aligned in a responsive split layout with an optional reverse mode.

Properties

eyebrow string | default: Eyebrow text

Optional eyebrow text displayed above the heading.

heading string | default: Heading text

Main heading for the split section.

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

Supporting body copy beneath the heading.

buttonSections array | default: array

Calls-to-action shown beneath the copy block.

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

Optional image displayed above the feature list.

imageAlt string | default: Feature image

Alt text describing the image content.

imageAspectRatio enum | default: portrait

Aspect ratio applied to the image.

Accepted values:

none
portrait
square
landscape
widescreen

imageRounded boolean | default: true

Toggles rounded corners on the image.

reverse boolean | default: false

Flips the layout so the feature list appears before the copy.

colorScheme enum | default: inherit

Color scheme theme applied to the section wrapper.

Accepted values:

inherit
default
contrast

backgroundColor enum | default: base

Background color for the section.

Accepted values:

none
base
surface
accent
highlight