Back to site

Split

Two-column layout for side-by-side content.

Side A

This is content for side A.

Side B

This is content for side B.

---
import Text from "@core-elements/text/Text.astro";
import Split from "@wrappers/split/Split.astro";
---

<Split distributionMode="half" fixedWidth="null" label="" minSplitWidth={700} verticalAlignment="top">
  <Fragment slot="first">
    <Text>
      <h2>Side A</h2>
      <p>This is content for side A.</p>
    </Text>
  </Fragment>
  <Fragment slot="second">
    <Text>
      <h2>Side B</h2>
      <p>This is content for side B.</p>
    </Text>
  </Fragment>
</Split>
---
blocks:
  _component: building-blocks/wrappers/split
  firstColumnContentSections:
    - _component: building-blocks/core-elements/text
      text: |-
        ## Side A

        This is content for side A.
  secondColumnContentSections:
    - _component: building-blocks/core-elements/text
      text: |-
        ## Side B

        This is content for side B.
  distributionMode: half
  fixedWidth: null
  verticalAlignment: top
  reverse: false
  label: ''
  minSplitWidth: 700
---

Overview

Displays two content areas side by side with adjustable widths. Supports different column ratios, vertical alignment, and the option to reverse column order.

Properties

label string

Optional label for the split to help identify it in the editor.

firstColumnContentSections array | default: array

Array of content sections to render in the first column.

secondColumnContentSections array | default: array

Array of content sections to render in the second column.

distributionMode enum | default: half

Predefined distribution mode for both columns.

Accepted values:
  • quarter-three-quarters
  • third-two-thirds
  • half
  • two-thirds-third
  • three-quarters-quarter
  • fixed-flexible
  • flexible-fixed

fixedWidth number

Fixed width in pixels for the fixed column (used when distribution mode includes 'fixed').

minSplitWidth number | default: 760

Minimum width in pixels before switching to mobile layout.

verticalAlignment enum | default: center

Vertical alignment of the columns.

Accepted values:
  • top
  • center
  • bottom
  • stretch

reverse boolean | default: false

Swaps the order of the columns.

reverseOrderOnMobile boolean | default: false

When true, reversed splits will have their order flipped on mobile (text-image pattern). When false, reversed splits keep their desktop order on mobile.

gap enum | default: lg

Spacing between the two columns.

Accepted values:
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl

Slots

first

The contents for the first side of the Split. Used only when the firstColumnContentSections property is not set.

second

The contents for the second side of the Split. Used only when the secondColumnContentSections property is not set.

Examples

Mode

Quarter column

This column takes up 25% of the available space.

Three quarters column

This column takes up 75% of the available space.

---
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
import Split from "@wrappers/split/Split.astro";
---

<Split distributionMode="quarter-three-quarters" fixedWidth="null" verticalAlignment="top">
  <Fragment slot="first">
    <Card backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Quarter column</h2>
        <p>This column takes up 25% of the available space.</p>
      </Text>
    </Card>
  </Fragment>
  <Fragment slot="second">
    <Card backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Three quarters column</h2>
        <p>This column takes up 75% of the available space.</p>
      </Text>
    </Card>
  </Fragment>
</Split>
---
blocks:
  _component: building-blocks/wrappers/split
  firstColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: accent
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Quarter column

            This column takes up 25% of the available space.
  secondColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: highlight
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Three quarters column

            This column takes up 75% of the available space.
  distributionMode: quarter-three-quarters
  fixedWidth: null
  verticalAlignment: top
  reverse: false
---

Third column

This column takes up 33% of the available space.

Two thirds column

This column takes up 66% of the available space.

---
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
import Split from "@wrappers/split/Split.astro";
---

<Split distributionMode="third-two-thirds" fixedWidth="null" verticalAlignment="top">
  <Fragment slot="first">
    <Card backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Third column</h2>
        <p>This column takes up 33% of the available space.</p>
      </Text>
    </Card>
  </Fragment>
  <Fragment slot="second">
    <Card backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Two thirds column</h2>
        <p>This column takes up 66% of the available space.</p>
      </Text>
    </Card>
  </Fragment>
</Split>
---
blocks:
  _component: building-blocks/wrappers/split
  firstColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: accent
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Third column

            This column takes up 33% of the available space.
  secondColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: highlight
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Two thirds column

            This column takes up 66% of the available space.
  distributionMode: third-two-thirds
  fixedWidth: null
  verticalAlignment: top
  reverse: false
---

Half column

This column takes up 50% of the available space.

Half column

This column also takes up 50% of the available space.

---
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
import Split from "@wrappers/split/Split.astro";
---

<Split distributionMode="half" fixedWidth="null" minSplitWidth={500} verticalAlignment="top">
  <Fragment slot="first">
    <Card backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Half column</h2>
        <p>This column takes up 50% of the available space.</p>
      </Text>
    </Card>
  </Fragment>
  <Fragment slot="second">
    <Card backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Half column</h2>
        <p>This column also takes up 50% of the available space.</p>
      </Text>
    </Card>
  </Fragment>
</Split>
---
blocks:
  _component: building-blocks/wrappers/split
  firstColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: accent
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Half column

            This column takes up 50% of the available space.
  secondColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: highlight
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Half column

            This column also takes up 50% of the available space.
  distributionMode: half
  fixedWidth: null
  minSplitWidth: 500
  verticalAlignment: top
  reverse: false
---

Two thirds column

This column takes up 66% of the available space.

Third column

This column takes up 33% of the available space.

---
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
import Split from "@wrappers/split/Split.astro";
---

<Split distributionMode="two-thirds-third" fixedWidth="null" verticalAlignment="top">
  <Fragment slot="first">
    <Card backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Two thirds column</h2>
        <p>This column takes up 66% of the available space.</p>
      </Text>
    </Card>
  </Fragment>
  <Fragment slot="second">
    <Card backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Third column</h2>
        <p>This column takes up 33% of the available space.</p>
      </Text>
    </Card>
  </Fragment>
</Split>
---
blocks:
  _component: building-blocks/wrappers/split
  firstColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: accent
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Two thirds column

            This column takes up 66% of the available space.
  secondColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: highlight
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Third column

            This column takes up 33% of the available space.
  distributionMode: two-thirds-third
  fixedWidth: null
  verticalAlignment: top
  reverse: false
---

Three quarters column

This column takes up 75% of the available space.

Quarter column

This column takes up 25% of the available space.

---
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
import Split from "@wrappers/split/Split.astro";
---

<Split distributionMode="three-quarters-quarter" fixedWidth="null" verticalAlignment="top">
  <Fragment slot="first">
    <Card backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Three quarters column</h2>
        <p>This column takes up 75% of the available space.</p>
      </Text>
    </Card>
  </Fragment>
  <Fragment slot="second">
    <Card backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Quarter column</h2>
        <p>This column takes up 25% of the available space.</p>
      </Text>
    </Card>
  </Fragment>
</Split>
---
blocks:
  _component: building-blocks/wrappers/split
  firstColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: accent
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Three quarters column

            This column takes up 75% of the available space.
  secondColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: highlight
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Quarter column

            This column takes up 25% of the available space.
  distributionMode: three-quarters-quarter
  fixedWidth: null
  verticalAlignment: top
  reverse: false
---

Fixed column

This column has a fixed width.

Flexible column

This column takes up the remaining space.

---
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
import Split from "@wrappers/split/Split.astro";
---

<Split distributionMode="fixed-flexible" fixedWidth="null" minSplitWidth={500} verticalAlignment="top">
  <Fragment slot="first">
    <Card backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Fixed column</h2>
        <p>This column has a fixed width.</p>
      </Text>
    </Card>
  </Fragment>
  <Fragment slot="second">
    <Card backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Flexible column</h2>
        <p>This column takes up the remaining space.</p>
      </Text>
    </Card>
  </Fragment>
</Split>
---
blocks:
  _component: building-blocks/wrappers/split
  firstColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: accent
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Fixed column

            This column has a fixed width.
  secondColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: highlight
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Flexible column

            This column takes up the remaining space.
  distributionMode: fixed-flexible
  fixedWidth: null
  minSplitWidth: 500
  verticalAlignment: top
  reverse: false
---

Flexible column

This column takes up the remaining space.

Fixed column

This column has a fixed width.

---
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
import Split from "@wrappers/split/Split.astro";
---

<Split distributionMode="flexible-fixed" fixedWidth="null" minSplitWidth={500} verticalAlignment="top">
  <Fragment slot="first">
    <Card backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Flexible column</h2>
        <p>This column takes up the remaining space.</p>
      </Text>
    </Card>
  </Fragment>
  <Fragment slot="second">
    <Card backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Fixed column</h2>
        <p>This column has a fixed width.</p>
      </Text>
    </Card>
  </Fragment>
</Split>
---
blocks:
  _component: building-blocks/wrappers/split
  firstColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: accent
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Flexible column

            This column takes up the remaining space.
  secondColumnContentSections:
    - _component: building-blocks/wrappers/card
      paddingHorizontal: sm
      paddingVertical: sm
      backgroundColor: highlight
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Fixed column

            This column has a fixed width.
  distributionMode: flexible-fixed
  fixedWidth: null
  minSplitWidth: 500
  verticalAlignment: top
  reverse: false
---

Vertical Alignment

Side A

This is verbose content for side A. We're making this column longer so we can highlight how the alignment works.

Here's even more text to help illustrate the point we're trying to make with this demonstration.

And here's even more text to really drive the point home.

Side B

This is content for side B.

---
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
import Split from "@wrappers/split/Split.astro";
---

<Split distributionMode="half" fixedWidth="null" verticalAlignment="top">
  <Fragment slot="first">
    <Card backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Side A</h2>
        <p>This is verbose content for side A. We're making this column longer so we can highlight how the alignment works.</p>
        <p>Here's even more text to help illustrate the point we're trying to make with this demonstration.</p>
        <p>And here's even more text to really drive the point home.</p>
      </Text>
    </Card>
  </Fragment>
  <Fragment slot="second">
    <Card backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Side B</h2>
        <p>This is content for side B.</p>
      </Text>
    </Card>
  </Fragment>
</Split>
---
blocks:
  _component: building-blocks/wrappers/split
  firstColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: accent
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Side A

            This is verbose content for side A. We're making this column longer so we can highlight how the alignment works.

            Here's even more text to help illustrate the point we're trying to make with this demonstration.

            And here's even more text to really drive the point home.
  secondColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: highlight
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Side B

            This is content for side B.
  distributionMode: half
  fixedWidth: null
  verticalAlignment: top
  reverse: false
---

Side A

This is verbose content for side A. We're making this column longer so we can highlight how the alignment works.

Here's even more text to help illustrate the point we're trying to make with this demonstration.

And here's even more text to really drive the point home.

Side B

This is content for side B.

---
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
import Split from "@wrappers/split/Split.astro";
---

<Split distributionMode="half" fixedWidth="null" verticalAlignment="center">
  <Fragment slot="first">
    <Card backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Side A</h2>
        <p>This is verbose content for side A. We're making this column longer so we can highlight how the alignment works.</p>
        <p>Here's even more text to help illustrate the point we're trying to make with this demonstration.</p>
        <p>And here's even more text to really drive the point home.</p>
      </Text>
    </Card>
  </Fragment>
  <Fragment slot="second">
    <Card backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Side B</h2>
        <p>This is content for side B.</p>
      </Text>
    </Card>
  </Fragment>
</Split>
---
blocks:
  _component: building-blocks/wrappers/split
  firstColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: accent
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Side A

            This is verbose content for side A. We're making this column longer so we can highlight how the alignment works.

            Here's even more text to help illustrate the point we're trying to make with this demonstration.

            And here's even more text to really drive the point home.
  secondColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: highlight
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Side B

            This is content for side B.
  distributionMode: half
  fixedWidth: null
  verticalAlignment: center
  reverse: false
---

Side A

This is verbose content for side A. We're making this column longer so we can highlight how the alignment works.

Here's even more text to help illustrate the point we're trying to make with this demonstration.

And here's even more text to really drive the point home.

Side B

This is content for side B.

---
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
import Split from "@wrappers/split/Split.astro";
---

<Split distributionMode="half" fixedWidth="null" verticalAlignment="bottom">
  <Fragment slot="first">
    <Card backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Side A</h2>
        <p>This is verbose content for side A. We're making this column longer so we can highlight how the alignment works.</p>
        <p>Here's even more text to help illustrate the point we're trying to make with this demonstration.</p>
        <p>And here's even more text to really drive the point home.</p>
      </Text>
    </Card>
  </Fragment>
  <Fragment slot="second">
    <Card backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Side B</h2>
        <p>This is content for side B.</p>
      </Text>
    </Card>
  </Fragment>
</Split>
---
blocks:
  _component: building-blocks/wrappers/split
  firstColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: accent
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Side A

            This is verbose content for side A. We're making this column longer so we can highlight how the alignment works.

            Here's even more text to help illustrate the point we're trying to make with this demonstration.

            And here's even more text to really drive the point home.
  secondColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: highlight
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Side B

            This is content for side B.
  distributionMode: half
  fixedWidth: null
  verticalAlignment: bottom
  reverse: false
---

Side A

This is verbose content for side A. We're making this column longer so we can highlight how the alignment works.

Here's even more text to help illustrate the point we're trying to make with this demonstration.

And here's even more text to really drive the point home.

Side B

This is content for side B.

---
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
import Split from "@wrappers/split/Split.astro";
---

<Split distributionMode="half" fixedWidth="null" verticalAlignment="stretch">
  <Fragment slot="first">
    <Card backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Side A</h2>
        <p>This is verbose content for side A. We're making this column longer so we can highlight how the alignment works.</p>
        <p>Here's even more text to help illustrate the point we're trying to make with this demonstration.</p>
        <p>And here's even more text to really drive the point home.</p>
      </Text>
    </Card>
  </Fragment>
  <Fragment slot="second">
    <Card backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Side B</h2>
        <p>This is content for side B.</p>
      </Text>
    </Card>
  </Fragment>
</Split>
---
blocks:
  _component: building-blocks/wrappers/split
  firstColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: accent
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Side A

            This is verbose content for side A. We're making this column longer so we can highlight how the alignment works.

            Here's even more text to help illustrate the point we're trying to make with this demonstration.

            And here's even more text to really drive the point home.
  secondColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: highlight
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Side B

            This is content for side B.
  distributionMode: half
  fixedWidth: null
  verticalAlignment: stretch
  reverse: false
---

Reverse

Side B

This is content for side B.

Side A

This is content for side A.

---
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
import Split from "@wrappers/split/Split.astro";
---

<Split distributionMode="third-two-thirds" fixedWidth="null" reverse verticalAlignment="top">
  <Fragment slot="first">
    <Card backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Side A</h2>
        <p>This is content for side A.</p>
      </Text>
    </Card>
  </Fragment>
  <Fragment slot="second">
    <Card backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Side B</h2>
        <p>This is content for side B.</p>
      </Text>
    </Card>
  </Fragment>
</Split>
---
blocks:
  _component: building-blocks/wrappers/split
  firstColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: accent
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Side A

            This is content for side A.
  secondColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: highlight
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Side B

            This is content for side B.
  distributionMode: third-two-thirds
  fixedWidth: null
  verticalAlignment: top
  reverse: true
---

Side A

This is content for side A.

Side B

This is content for side B.

---
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
import Split from "@wrappers/split/Split.astro";
---

<Split distributionMode="third-two-thirds" fixedWidth="null" verticalAlignment="top">
  <Fragment slot="first">
    <Card backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Side A</h2>
        <p>This is content for side A.</p>
      </Text>
    </Card>
  </Fragment>
  <Fragment slot="second">
    <Card backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
      <Text>
        <h2>Side B</h2>
        <p>This is content for side B.</p>
      </Text>
    </Card>
  </Fragment>
</Split>
---
blocks:
  _component: building-blocks/wrappers/split
  firstColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: accent
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Side A

            This is content for side A.
  secondColumnContentSections:
    - _component: building-blocks/wrappers/card
      backgroundColor: highlight
      paddingHorizontal: sm
      paddingVertical: sm
      contentSections:
        - _component: building-blocks/core-elements/text
          text: |-
            ## Side B

            This is content for side B.
  distributionMode: third-two-thirds
  fixedWidth: null
  verticalAlignment: top
  reverse: false
---