Vertical split
5 min
Vertical Split blocks arrange content into two side-by-side columns. They are useful for comparisons, layouts with supporting information, or presenting code alongside explanations.
Syntax
You can add this component using either Markdown or MDX.
:::::VerticalSplit{layout="middle"}
::::VerticalSplitItem
Left content.
::::
::::VerticalSplitItem
Right content.
::::
:::::Vertical Split blocks support three layout options:
- left, creates a wider left column.
- middle, creates two equally sized columns.
- right, creates a wider right column.
Each layout requires exactly two VerticalSplitItem blocks.
MDX Example
The following examples demonstrate the three available layout options.
Equal Columns (middle)
<VerticalSplit layout="middle">
<VerticalSplitItem>
### Left Column
This column takes up equal space with the right column.
</VerticalSplitItem>
<VerticalSplitItem>
### Right Column
Perfect for comparing features, showing before/after, or code + explanation.
</VerticalSplitItem>
</VerticalSplit>Left-heavy Layout (left)
<VerticalSplit layout="left">
<VerticalSplitItem>
### Main Content
The left column is wider — use this when the left side has the primary content and the right side has supplementary info.
</VerticalSplitItem>
<VerticalSplitItem>
<hint type="info">
This sidebar provides extra context.
</hint>
</VerticalSplitItem>
</VerticalSplit>Right-heavy Layout (right)
<VerticalSplit layout="right">
<VerticalSplitItem>
**Quick links:**
- [Tabs](/tabs)
- [Tables](/tables)
</VerticalSplitItem>
<VerticalSplitItem>
### Detailed Explanation
The right column is wider — use this when the right side has the primary content.
</VerticalSplitItem>
</VerticalSplit>Have a question?
Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.