Shortcode Reference
Shortcodes extend Markdown with layout and component capabilities. Mix them freely with regular Markdown.
Syntax: [shortcode attribute="value"]…[/shortcode]
[grid]
Creates a CSS Grid container.
| Attribute | Required | Description |
|---|---|---|
cols |
Yes | Number of columns (1-12) |
gap |
No | Gap between cells (1-6) |
class |
No | Extra CSS classes |
cols="3"
gap="4"
Equal widths
[row]
Flexbox row - columns share available width equally, no cols needed.
| Attribute | Required | Description |
|---|---|---|
gap |
No | Gap between columns (1-6) |
class |
No | Extra CSS classes |
Left
Right
[col]
A column inside [grid] or [row]. Content is rendered as Markdown.
| Attribute | Required | Description |
|---|---|---|
span |
No | Columns to span (values must sum to grid cols) |
class |
No | Extra CSS classes |
span="8" - main content
span="4" - sidebar
[card]
Wraps content in a styled card.
| Attribute | Required | Description |
|---|---|---|
title |
No | Card header text |
collapsible |
No | "true" to toggle body on header click |
class |
No | Extra CSS classes |
Markdown works inside cards, including italic, code, and shortcodes.
This body starts collapsed.
Embedding a Form
Paste this HTML anywhere in your Markdown to embed a form:
<div data-form="your-form-slug"></div>
Replace your-form-slug with the slug from the Form Builder. Example:
<div data-form="enquiries"></div>
[slideover]
Renders a trigger button that opens a slide-in panel with Markdown content.
| Attribute | Required | Description |
|---|---|---|
title |
No | Panel header text |
trigger |
No | Button label (default: "Open") |
size |
No | sm, md (default), lg |
position |
No | right (default) or left |
[slideover title="More Info" trigger="Read more" size="md"]
Markdown here - cards, grids, and other shortcodes work inside.
[/slideover]
[dconfig]
Declarative behaviour - wires up click handlers and class toggles from JSON, no JavaScript needed.
[dconfig]
{
"#my-btn": {
"events": {
"click": { "target": "#panel", "toggleClass": "hidden" }
}
}
}
[/dconfig]
You can also set DConfig from the DConfig section in the page editor. Inline shortcodes win on selector conflict. See Interactive demos →