Shortcodes extend Markdown with layout components. They are processed server-side before Markdown
rendering, so you can freely mix shortcodes and Markdown in the same page body.
Syntax: [shortcode attribute="value"] (self-closing: [shortcode
/]) and [/shortcode] for paired tags.
Layout
| Shortcode |
Description |
[grid cols="N" gap="N"]...[/grid] |
CSS Grid container - N columns (1-12), optional gap (1-6) |
[row gap="N"]...[/row] |
Flexbox row - columns share width equally |
[col span="N"]...[/col] |
Column inside a grid or row; span sets column span |
Components
| Shortcode |
Description |
[card title="..."]...[/card] |
Styled card. Supports 6 variants, ~44 gradients and 33 layouts - see the
Cards subsection below.
|
[tabs]...[/tabs] |
Tab group; use [tab title="..."]...[/tab] inside |
[accordion]...[/accordion] |
Accordion group; use [item title="..."]...[/item] inside |
[carousel]...[/carousel] |
Carousel; use [slide]...[/slide] inside |
[badge variant="success"]...[/badge] |
Inline badge; variants: primary, secondary, success, danger, warning, info |
[icon name="star" /] |
Inline Domma icon; optional size and color |
[spacer size="16" /] |
Vertical whitespace block (px height) |
[timeline]...[/timeline] |
Progression timeline; use [event title="..." date="..."
status="..."]...[/event] inside
|
[countdown to="2026-12-31" /] |
Animated countdown to a date |
Cards - variants, gradients & layouts
The [card] shortcode is the most configurable component in the system. It has three
layers you can mix freely: variant (the overall visual style), gradient
(colour palette, used with variant="gradient" or any layout that accepts a gradient),
and layout (the internal structure - header/body/footer, image position, sub-tags,
etc.). Every layout accepts every variant, gradient and universal attribute listed below.
[card variant="gradient" gradient="ocean" layout="icon-top" icon="star" title="Fast"]
Body content in **Markdown** is supported.
[/card]
Variants
| Variant |
Description |
clean |
Flat, minimal chrome - no border, subtle background |
gradient |
Coloured gradient background (see Gradients below). Pair with gradient="name"
|
glass |
Frosted glass / backdrop-blur effect, translucent background |
accent |
Primary-colour accent border on the left edge |
dark |
Dark background with inverted text - good on light pages |
glow |
Subtle halo / outer glow effect |
primary |
Legacy alias - adds card-primary class for backwards compatibility |
Built-in gradients
Shipped in public/css/ - available on every install. Default when
gradient is omitted: indigo.
arctic, aurora, dusk, fire, forest,
gold, indigo, lagoon, lime,
midnight, ocean, rose, slate,
sunset
Project-specific gradients
Defined in content/custom.css on this site only - fresh installs will not have
these unless the CSS is copied over.
Single-tone: purple, blue, green,
night
Theme · light pairs: ocean-light, forest-light,
sunset-light, royal-light, lemon-light,
silver-light, charcoal-light, christmas-light,
unicorn-light, dreamy-light, grayve-light,
mint-light, wedding-light
Theme · dark pairs: ocean-dark, forest-dark,
sunset-dark, royal-dark, lemon-dark,
silver-dark, charcoal-dark, christmas-dark,
unicorn-dark, dreamy-dark, grayve-dark,
mint-dark, wedding-dark
Gradient names are not validated - a typo falls through to the
default background with no warning. Use /test-card-gradients to preview every
palette.
Universal attributes
These work on any layout and any variant.
| Attribute |
Values |
Purpose |
title |
string |
Card heading (most layouts) |
subtitle |
string |
Secondary heading (many layouts re-use it as date / role / plan) |
icon |
icon name |
Domma icon (see Icons view) |
footer |
string |
Footer text (also used by pricing as the CTA label) |
image |
URL |
Background image for image / media layouts |
collapsible |
true |
Body toggles open/closed via click on the header |
hover |
boolean flag |
Raises the card on mouse-over |
borderless |
boolean flag |
Removes the card border |
shadow |
none · md · lg |
Drop-shadow depth |
rounded |
none · sm · lg ·
full |
Corner radius |
padding |
compact · spacious |
Internal spacing |
text-align |
center · right |
Body text alignment (default left) |
font |
serif · mono |
Override card typeface |
font-size |
sm · lg · xl |
Override card body text size |
class |
string |
Extra CSS classes appended to the root element |
id |
string |
DOM id (useful for anchor links / dconfig targets) |
Layouts
Select a layout with layout="name". If omitted, the card uses a simple body-only
layout. Layouts marked (needs sub-tags) will render empty without their child tags.
Structural
| Layout |
Attributes |
Purpose |
basic |
footer |
Body-only card, optional footer |
header-body |
title |
Header with title + body |
header-body-footer |
title, footer |
Classic three-zone card |
no-header-footer |
footer |
Body + footer only |
Icon headers
| Layout |
Attributes |
Purpose |
icon-top |
icon, title, subtitle |
Large centred icon above title - good for feature grids |
icon-inline |
icon, title, subtitle |
Icon sits to the left of the title in the header row |
Image
| Layout |
Attributes |
Purpose |
image-top |
image, title |
Image banner above header + body |
image-overlay |
image, title |
Title overlaid on the image with a tint |
thumb-left |
image, title |
Square thumbnail on the left, body on the right |
thumb-right |
image, title |
Mirror of thumb-left |
wide-left-image |
image, title, footer |
Horizontal card, wider image strip on the left |
full-bg |
image, title |
Full-bleed image backdrop with body text over it |
split-half |
image, gradient, title |
Half gradient (or image) on the left, content on the right |
Media
| Layout |
Attributes |
Purpose |
video-media |
image (poster), duration, title |
Video thumbnail with a play button and duration badge |
location-map |
address, title |
Placeholder map panel + address block (static - no live map) |
People & social proof
| Layout |
Attributes |
Purpose |
avatar-profile |
icon, title, subtitle,
tags (comma-separated)
|
Circular avatar + name + role + pill tags - team / author cards |
quote-testimonial |
title (author), subtitle (role) |
Quotation mark + body quote + author attribution row |
rating-review |
rating (0-5), title, subtitle,
verified (flag)
|
Star rating + review body + reviewer attribution |
Metrics & data
| Layout |
Attributes |
Purpose |
stat-metric |
title (label), value, delta,
progress (0-100)
|
Big-number KPI tile with delta arrow and optional progress bar |
progress-goal (needs sub-tags) |
title, subtitle, progress; child
[milestone done]...[/milestone]
|
Progress bar + milestone checklist |
activity-feed (needs sub-tags) |
title; child
[activity user="..." action="..." time="..." /]
|
User activity list with initials avatars and timestamps |
Markers & callouts
| Layout |
Attributes |
Purpose |
callout |
callout-type (info/warn/success/error),
icon, title
|
Coloured inline notice / tip box |
step-numbered |
step (number), title, gradient |
Numbered step for tutorials / walkthroughs |
corner-badge |
badge (label), icon, title |
Card with a ribbon-style badge in the top-right corner |
badge-band |
badge, icon, gradient, title |
Full-width coloured band across the top with a label and icon |
tag-cloud |
title, tags (comma-separated) |
Coloured pill list - topic tags, skills, categories |
timeline-entry |
title, subtitle (date), badge (tag) |
Single dot-on-line timeline entry - stack several for a history list |
Commerce & comparison
| Layout |
Attributes & sub-tags |
Purpose |
pricing (needs sub-tags) |
title, price, period, gradient,
footer (CTA label); child [feature]...[/feature]
|
Pricing tier card with gradient header, feature list and CTA link |
feature-comparison (needs sub-tags) |
title, subtitle (plan), gradient; child
[feature]text[/feature] or [feature excluded]text[/feature]
|
Plan comparison rows with tick / cross marks |
before-after (needs sub-tags) |
title; children
[before]item · item[/before] and
[after]item · item[/after] (items split on · or
newline)
|
Two-column before/after comparison list |
Special & utility
| Layout |
Attributes |
Purpose |
glass-gradient-border |
title |
Frosted glass card with a gradient border ring. Note: this layout
bypasses cardVariantClasses, so universal variant / gradient / shadow
attributes do not apply.
|
code-snippet |
lang (label); body is rendered as escaped code |
Code block with language label header |
file-document |
filename, filesize, filetype, title
|
File attachment row with type icon and download link (link href is placeholder) |
Sub-tag reference
These are child tags accepted by specific layouts - they are not shortcodes in their own right
and only render inside a matching parent card.
| Sub-tag |
Parent layout |
Attributes |
[feature]text[/feature] |
pricing, feature-comparison |
excluded (flag, comparison only) - renders as a cross instead of a tick
|
[before]a · b · c[/before] |
before-after |
Items split on · or newline |
[after]a · b · c[/after] |
before-after |
Items split on · or newline |
[activity user="..." action="..." time="..." /] |
activity-feed |
Self-closing; one row per tag |
[milestone done]text[/milestone] |
progress-goal |
done (flag) - filled dot if present, hollow otherwise |
Content
| Shortcode |
Description |
[hero variant="dark" size="sm"]...[/hero] |
Full-width hero section; supports twinkle, blobs,
image, overlay |
[table striped="true"]...[/table] |
Wraps a GFM Markdown table with Domma table CSS classes |
[form name="slug" /] |
Embeds a Form Builder form by slug |
[collection slug="..." display="table" /] |
Renders collection entries inline (table, cards, list, accordion, or block) |
Collection attributes
| Attribute |
Values |
Purpose |
slug |
collection slug |
Required. Which collection to render. |
display |
table · cards · list ·
accordion · block |
How to render each entry. Default table. |
block |
block template name |
Required when display="block". Names a template in
content/blocks/<name>.html whose
{{field}} placeholders get substituted per entry.
|
cols |
2 · 3 · 4 · 5
· 6 |
Grid column count when display="block". |
where |
field=value or
f1=v1,f2=v2 |
Row filter (simple equality only, AND'd across comma-separated predicates). Example:
where="tab=developers" or
where="tier=free,featured=true". No OR, no comparison operators -
use a saved View for anything more complex.
|
sort |
field name or createdAt |
Sort field. Default createdAt. |
order |
asc · desc |
Sort direction. Default desc. |
limit |
integer |
Maximum number of entries to render. 0 or omitted = all. |
fields |
comma-separated field names |
Column filter - only these fields are shown (table/cards/list displays only).
|
title-field |
field name |
Which field to use as the entry title (cards/accordion displays). |
empty |
string |
Message shown when the filter matches no entries. |
cta |
action slug |
Attach a CMS Action button to each rendered entry. See CTA attributes below. |
Form follow-up
Two optional settings control what happens after a submission is stored:
| Field |
Where |
Description |
successMessage |
Settings tab |
Text shown inline after submission (replaces the form). Default: "Thank you for your
submission."
|
successRedirect |
Settings tab |
URL to redirect the visitor on success. Takes priority over successMessage if
set.
|
actionSlug |
Actions tab → CMS Action |
Slug of a CMS Action to execute after the entry is stored. Requires Pro (MongoDB).
Non-fatal on failure.
|
For the full walkthrough, see the
Tutorials → Form Follow-Up: Notifications & Actions tutorial.
Interactive
| Shortcode |
Description |
[slideover title="..." trigger="..."]...[/slideover] |
Slide-in panel opened by a trigger button |
[dconfig]{...}[/dconfig] |
Declarative click handlers and class toggles - no JavaScript needed |
Pro shortcodes
| Shortcode |
Description |
[view slug="..." display="table" /] |
Executes a saved View and renders results. Requires MongoDB. |
[cta action="..." entry="..."]Label[/cta] |
Action-trigger button. Requires the visitor to be logged in. |
Full attribute reference and live demos: Shortcode
Reference · Components · Effects