Columns | Components

The columns and split layouts keep the level-1 title at full width and lay the :::col blocks out side by side. :::left and :::right are aliases of :::col.

Live demo

Click the deck, then use ← → · 2 slides · 00:20Open fullscreen →

Syntax

Markdown
--- layout=columns ratio=2:1

# Free columns

:::col
### Lorem ipsum
Dolor sit amet.
:::

:::col
Consectetur adipiscing elit.
:::

MDX
<Columns ratio="1:2">
  <Col>Lorem</Col>
  <Col>Ipsum</Col>
</Columns>

<Left> and <Right> are the JSX aliases of <Col>.

Attributes and props

Attribute	Type	Default	Description
`ratio`	`string` such as `2:1`	equal columns	Column proportions, on the slide or `Columns`

In other formats

Format	Status	Notes
`deck`	Available	Rendered in slides, the presenter console and the HTML and PDF exports.
`docs`	Available	Through <StoryEmbed slug="…" /> in any page of a site.
`motion`	Available	Animated block in a film.
`report`	Planned · P6	Section of a paged report.
`toon`	Planned · P7	Panel of a vertical strip.
`book`	Planned · P8	Block of a printable chapter.

Last modified on October 29, 2026