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 Split from "@wrappers/split/Split.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---
<Split distributionMode="quarter-three-quarters" fixedWidth="null" verticalAlignment="top">
<Fragment slot="first">
<CustomSection backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
<Text>
<h2>Quarter column</h2>
<p>This column takes up 25% of the available space.</p>
</Text>
</CustomSection>
</Fragment>
<Fragment slot="second">
<CustomSection backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
<Text>
<h2>Three quarters column</h2>
<p>This column takes up 75% of the available space.</p>
</Text>
</CustomSection>
</Fragment>
</Split>---
blocks:
_component: building-blocks/wrappers/split
firstColumnContentSections:
- _component: page-sections/builders/custom-section
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: page-sections/builders/custom-section
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 Split from "@wrappers/split/Split.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---
<Split distributionMode="third-two-thirds" fixedWidth="null" verticalAlignment="top">
<Fragment slot="first">
<CustomSection backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
<Text>
<h2>Third column</h2>
<p>This column takes up 33% of the available space.</p>
</Text>
</CustomSection>
</Fragment>
<Fragment slot="second">
<CustomSection backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
<Text>
<h2>Two thirds column</h2>
<p>This column takes up 66% of the available space.</p>
</Text>
</CustomSection>
</Fragment>
</Split>---
blocks:
_component: building-blocks/wrappers/split
firstColumnContentSections:
- _component: page-sections/builders/custom-section
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: page-sections/builders/custom-section
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 Split from "@wrappers/split/Split.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---
<Split distributionMode="half" fixedWidth="null" minSplitWidth={500} verticalAlignment="top">
<Fragment slot="first">
<CustomSection backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
<Text>
<h2>Half column</h2>
<p>This column takes up 50% of the available space.</p>
</Text>
</CustomSection>
</Fragment>
<Fragment slot="second">
<CustomSection backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
<Text>
<h2>Half column</h2>
<p>This column also takes up 50% of the available space.</p>
</Text>
</CustomSection>
</Fragment>
</Split>---
blocks:
_component: building-blocks/wrappers/split
firstColumnContentSections:
- _component: page-sections/builders/custom-section
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: page-sections/builders/custom-section
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 Split from "@wrappers/split/Split.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---
<Split distributionMode="two-thirds-third" fixedWidth="null" verticalAlignment="top">
<Fragment slot="first">
<CustomSection backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
<Text>
<h2>Two thirds column</h2>
<p>This column takes up 66% of the available space.</p>
</Text>
</CustomSection>
</Fragment>
<Fragment slot="second">
<CustomSection backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
<Text>
<h2>Third column</h2>
<p>This column takes up 33% of the available space.</p>
</Text>
</CustomSection>
</Fragment>
</Split>---
blocks:
_component: building-blocks/wrappers/split
firstColumnContentSections:
- _component: page-sections/builders/custom-section
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: page-sections/builders/custom-section
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 Split from "@wrappers/split/Split.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---
<Split distributionMode="three-quarters-quarter" fixedWidth="null" verticalAlignment="top">
<Fragment slot="first">
<CustomSection backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
<Text>
<h2>Three quarters column</h2>
<p>This column takes up 75% of the available space.</p>
</Text>
</CustomSection>
</Fragment>
<Fragment slot="second">
<CustomSection backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
<Text>
<h2>Quarter column</h2>
<p>This column takes up 25% of the available space.</p>
</Text>
</CustomSection>
</Fragment>
</Split>---
blocks:
_component: building-blocks/wrappers/split
firstColumnContentSections:
- _component: page-sections/builders/custom-section
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: page-sections/builders/custom-section
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 Split from "@wrappers/split/Split.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---
<Split distributionMode="fixed-flexible" fixedWidth="null" minSplitWidth={500} verticalAlignment="top">
<Fragment slot="first">
<CustomSection backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
<Text>
<h2>Fixed column</h2>
<p>This column has a fixed width.</p>
</Text>
</CustomSection>
</Fragment>
<Fragment slot="second">
<CustomSection backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
<Text>
<h2>Flexible column</h2>
<p>This column takes up the remaining space.</p>
</Text>
</CustomSection>
</Fragment>
</Split>---
blocks:
_component: building-blocks/wrappers/split
firstColumnContentSections:
- _component: page-sections/builders/custom-section
backgroundColor: accent
paddingHorizontal: sm
paddingVertical: sm
contentSections:
- _component: building-blocks/core-elements/text
text: |-
## Fixed column
This column has a fixed width.
secondColumnContentSections:
- _component: page-sections/builders/custom-section
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 Split from "@wrappers/split/Split.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---
<Split distributionMode="flexible-fixed" fixedWidth="null" minSplitWidth={500} verticalAlignment="top">
<Fragment slot="first">
<CustomSection backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
<Text>
<h2>Flexible column</h2>
<p>This column takes up the remaining space.</p>
</Text>
</CustomSection>
</Fragment>
<Fragment slot="second">
<CustomSection backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
<Text>
<h2>Fixed column</h2>
<p>This column has a fixed width.</p>
</Text>
</CustomSection>
</Fragment>
</Split>---
blocks:
_component: building-blocks/wrappers/split
firstColumnContentSections:
- _component: page-sections/builders/custom-section
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: page-sections/builders/custom-section
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 Split from "@wrappers/split/Split.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---
<Split distributionMode="half" fixedWidth="null" verticalAlignment="top">
<Fragment slot="first">
<CustomSection 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>
</CustomSection>
</Fragment>
<Fragment slot="second">
<CustomSection backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
<Text>
<h2>Side B</h2>
<p>This is content for side B.</p>
</Text>
</CustomSection>
</Fragment>
</Split>---
blocks:
_component: building-blocks/wrappers/split
firstColumnContentSections:
- _component: page-sections/builders/custom-section
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: page-sections/builders/custom-section
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 Split from "@wrappers/split/Split.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---
<Split distributionMode="half" fixedWidth="null" verticalAlignment="center">
<Fragment slot="first">
<CustomSection 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>
</CustomSection>
</Fragment>
<Fragment slot="second">
<CustomSection backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
<Text>
<h2>Side B</h2>
<p>This is content for side B.</p>
</Text>
</CustomSection>
</Fragment>
</Split>---
blocks:
_component: building-blocks/wrappers/split
firstColumnContentSections:
- _component: page-sections/builders/custom-section
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: page-sections/builders/custom-section
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 Split from "@wrappers/split/Split.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---
<Split distributionMode="half" fixedWidth="null" verticalAlignment="bottom">
<Fragment slot="first">
<CustomSection 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>
</CustomSection>
</Fragment>
<Fragment slot="second">
<CustomSection backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
<Text>
<h2>Side B</h2>
<p>This is content for side B.</p>
</Text>
</CustomSection>
</Fragment>
</Split>---
blocks:
_component: building-blocks/wrappers/split
firstColumnContentSections:
- _component: page-sections/builders/custom-section
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: page-sections/builders/custom-section
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 Split from "@wrappers/split/Split.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---
<Split distributionMode="half" fixedWidth="null" verticalAlignment="stretch">
<Fragment slot="first">
<CustomSection 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>
</CustomSection>
</Fragment>
<Fragment slot="second">
<CustomSection backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
<Text>
<h2>Side B</h2>
<p>This is content for side B.</p>
</Text>
</CustomSection>
</Fragment>
</Split>---
blocks:
_component: building-blocks/wrappers/split
firstColumnContentSections:
- _component: page-sections/builders/custom-section
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: page-sections/builders/custom-section
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 Split from "@wrappers/split/Split.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---
<Split distributionMode="third-two-thirds" fixedWidth="null" reverse verticalAlignment="top">
<Fragment slot="first">
<CustomSection backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
<Text>
<h2>Side A</h2>
<p>This is content for side A.</p>
</Text>
</CustomSection>
</Fragment>
<Fragment slot="second">
<CustomSection backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
<Text>
<h2>Side B</h2>
<p>This is content for side B.</p>
</Text>
</CustomSection>
</Fragment>
</Split>---
blocks:
_component: building-blocks/wrappers/split
firstColumnContentSections:
- _component: page-sections/builders/custom-section
backgroundColor: accent
paddingHorizontal: sm
paddingVertical: sm
contentSections:
- _component: building-blocks/core-elements/text
text: |-
## Side A
This is content for side A.
secondColumnContentSections:
- _component: page-sections/builders/custom-section
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 Split from "@wrappers/split/Split.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---
<Split distributionMode="third-two-thirds" fixedWidth="null" verticalAlignment="top">
<Fragment slot="first">
<CustomSection backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
<Text>
<h2>Side A</h2>
<p>This is content for side A.</p>
</Text>
</CustomSection>
</Fragment>
<Fragment slot="second">
<CustomSection backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
<Text>
<h2>Side B</h2>
<p>This is content for side B.</p>
</Text>
</CustomSection>
</Fragment>
</Split>---
blocks:
_component: building-blocks/wrappers/split
firstColumnContentSections:
- _component: page-sections/builders/custom-section
backgroundColor: accent
paddingHorizontal: sm
paddingVertical: sm
contentSections:
- _component: building-blocks/core-elements/text
text: |-
## Side A
This is content for side A.
secondColumnContentSections:
- _component: page-sections/builders/custom-section
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
---