Layout Directives
Use sections, columns, and cells to structure Markdown without turning content into page-builder data.
Layout Directives
Layout directives are registry-backed Markdown containers for structured content. They preserve Markdown as the source of truth while giving the renderer enough structure to produce sections, columns, and cells.
Section
1:::section{theme="panel"}2 3## Interfaces Without Friction4 5Short intro text here.6 7:::theme
Close a section with ::: or :::endsection.
Columns
1:::2col{2 theme="default"3 cellTheme="panel"4}5 6### First column7 8Content.9 10### Second column11 12Content.13 14:::1:::3col2 3### First column4 5Content.6 7### Second column8 9Content.10 11### Third column12 13Content.14 15:::Column directives support:
themecellTheme
Heading-Based Cell Grouping
Grids are heading-aware relative to where they open.
If a grid opens under a heading of depth N, then:
- headings at depth
N + 1start new cells - deeper headings stay nested inside the current cell
- normal Markdown remains normal Markdown inside each cell
Explicit Cells
1:::2col2 3:::cell{theme="panel"}4First cell content.5:::6 7:::cell8Second cell content.9:::10 11:::theme
Closing Directives
:::closes the current directive scope:::endcolexplicitly closes the active grid:::endcloses the current section and nested grids:::endsectioncloses the current section and nested grids
Mixed Layout Example
1:::section{theme="panel"}2 3## Product Documentation4 5:::2col{cellTheme="panel"}6 7### Authoring8 9:::callout[Plain Markdown]{variant="tip"}10Authors keep readable source.11:::12 13### Rendering14 15```tsx16<MarkdownRenderer markdown={content} />17```18 19:::20 21:::Related Directives
For content components built on the same registry, see: