Vertical Split Block
Vertical Split Block
A Vertical Split block allows you to present information side‑by‑side in two columns. It is especially useful when:
- Comparing two concepts
- Showing instructions next to visuals
- Displaying code next to rendered output
- Presenting pros and cons
- Structuring wide content more efficiently
Below is the initial example of a 50/50 layout.
Left side content
Right side content
Additional Details
When to Use Vertical Split
Use a vertical split when content benefits from being consumed horizontally rather than vertically. This helps readers quickly correlate information without scrolling.
Vertical Split supports three layout options:
- left — 33% left, 67% right
- middle — 50% left, 50% right (default)
- right — 67% left, 33% right
These layouts are useful when one column requires more emphasis.
Real‑World Example: Wider Right Column
Below is a more complex example demonstrating the left layout, where the right column gets more space.
Explanation
This layout places the divider to the left, giving more space to the right column.
Use this when the primary content needs more horizontal space.
Expanded Content Example
This right column contains a larger block of text to demonstrate how the extra space is used.
If you'd like, I can add more examples including code comparisons, side‑by‑side images, or 67/33 right‑layout examples.