| name | column |
| description | Lay out content in equal-width columns using `|||`. Use for side-by-side comparisons, demo + source, before/after, two-pane layouts. |
Column
Renders content in equal-width columns. Each column gets an optional title and
may contain any Markdown — including other components.
Syntax
||| Title of column 1
Content of column 1.
||| Title of column 2
Content of column 2.
|||
Use additional ||| Title separators for three or more columns. The final
||| closes the block.
Examples
Demo + source:
||| Demo
[!button variant="primary" text="Click me"](#)
||| Source
```markdown
[!button variant="primary" text="Click me"](#)
```
|||
Three columns:
||| Free
- Markdown
- Components
- Themes
||| Pro
- Search
- Analytics
- Multi-repo
||| Enterprise
- SSO
- Audit log
- SLAs
|||
Tips
- Columns collapse to a single column on narrow screens automatically.
- Don't put very wide content (long code blocks, large images) inside columns;
use a
tab or full-width layout instead.
- Headings (
##) work inside columns but the column title is often enough.
