A two-column, equal-width layout. Always wrap each side in a [box:]. Collapses to a single column on mobile.
Syntax
[cols: *optional CSS here*]
[box:]
Left column content
[:box]
[box:]
Right column content
[:box]
[:cols]
Always wrap each column in a [box:] — the columns layout itself has no visual styling; the boxes provide structure.
Parameters
Any valid CSS property can be passed as an inline style on the [cols:] tag:
| Property | Example |
|---|---|
| Gap between columns | gap: 2rem |
| Vertical alignment | align-items: center |
| Text alignment | text-align: center |
Responsive Behaviour
| Screen width | Layout |
|---|---|
| > 720 px | Two columns, side by side |
| ≤ 720 px | Stacked vertically |
Example
[cols:]
[box:]
### Left column
Two equal-width columns, collapsing to a single column on mobile. Use for paired text + image, a list next to a description, or two related blocks.
[:box]
[box:]
### Right column
Columns align to their tops. Good for narrative content; less suited to items that need equal height.
[:box]
[:cols]
Left column
Two equal-width columns, collapsing to a single column on mobile. Use for paired text + image, a list next to a description, or two related blocks.
Right column
Columns align to their tops. Good for narrative content; less suited to items that need equal height.