Columns
Multi-column layouts that stack on mobile.
Columns place content side by side. The outer columns container uses four colons; each column inside uses three:
:::: columns
::: column
:::
::: column
**New in July**
Fresh features you'll love.
:::
::::Columns are equal-width by default, render correctly in Outlook, and stack vertically on mobile automatically.
Inside a column you can use text, images, buttons, tables, dividers, and spacers, along with the chart, progress, and breakdown directives; everything keeps its position within that column. A chart image beside the rows it explains:
:::: columns
::: column width=40 valign=middle
:::
::: column
::: breakdown swatches=true
1. Checkout: $4,210 (+12%)
2. Search: $3,980 (-3%)
3. Product page: $2,104 (+4%)
:::
:::
::::Column Parameters
Width
A bare number is a percentage; width= accepts a percent or pixel length:
:::: columns
::: column 30
Narrow sidebar
:::
::: column 70
Main content
:::
::::Widths are proportions of the row, not exact percentages of it. A row written to add up to 100 still fits on one line when a gap between bg cards needs room of its own — the widths shrink to make room and keep their ratios.
Alignment
left (default), center, right align the column's text, images, and buttons. valign= controls vertical alignment (top, middle, bottom) when columns have different heights:
:::: columns
::: column center valign=middle
Centered, vertically middled
:::
::: column
Taller content...
:::
::::Background
bg= gives a column a card-style background with inset padding (presets compact/spacious work like callout):
:::: columns
::: column bg=#eff6ff compact
A card cell
:::
::: column
Plain cell
:::
::::Text Color
color= overrides the text color for the column.
Container Parameters
Set on the outer columns container:
Gap
Space between columns, in pixels (default 16):
:::: columns gap=32
...
::::When columns stack on mobile, the gap between bg cards becomes vertical spacing. Use gap=0 for flush cards.
Mobile Stacking
Columns stack on small screens by default. Keep them side by side with stack=false:
:::: columns stack=false
::: column
🍎
:::
::: column
🍊
:::
::::With stack=false, use percentage widths only.
Notes
- Other directives (callout, stats, sparkline, …) can't be nested inside columns; their content renders as regular text, with a warning.
- In the plain-text version of the email, columns flatten to sequential content, left to right.