Shortcodes

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.
[box]...[/box]	A card with no header - a plain container. No shadow and a 2px corner radius unless shadow / rounded say otherwise. See Box 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

Box - a plain container

[box] wraps content in a card with no header. Without attributes it has no shadow and a 2px corner radius; give shadow or rounded to change either.

[box]
Any content - text, a button, a [grid] or a [card].
[/box]
[box shadow="md" rounded="lg" padding="spacious"]
Lifted off the page, with rounder corners.
[/box]
[box color="success"]
Tinted with the theme's success colour.
[/box]

A box follows the site's theme: its background, border, text and links come from the theme's colours, so it reads properly on every theme, light or dark, and when a visitor switches theme. variant="dark" stays a dark panel with light text on it whatever the theme.

Attribute	Values	Effect
shadow	none (default) · md · lg	Drop-shadow depth
rounded	xs (2px, default) · none · sm · lg · full	Corner radius
hover	off	Boxes and cards lift a little when the pointer is over them. hover="off" keeps this one still - for a box that is not clickable. Works on [card] too.
color (or colour)	primary · secondary · success · info · warning · danger · a hex colour such as #0f766e	A theme colour tints the box from the site's theme, light or dark. A hex colour is kept as you gave it, with black or white text - whichever reads better. Replaces variant.
padding, borderless, span, variant, footer, class, id	as on [card]	The box carries card and dm-box classes for your own CSS

A box never has a header: title, subtitle, icon, image and layout are ignored. Card effects (reveal, pulse, …) work on a box too. A [card] can go inside a [box] and a [box] inside a [card], but a box cannot hold another box.

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
span	2 to 6 · full	Columns the card takes in a [grid] (straight in the grid or inside a [col]; [box] too). Capped at the columns the grid has at each screen width - on phones it is always full width
shadow	none · md · lg	Drop-shadow depth
rounded	none · xs (2px) · 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, color, min-height
[banner type="warning" title="..." icon="..." dismissible]...[/banner]	An alert strip: info, success, warning, danger or neutral
[listgroup variant="flush"][item]...[/item][/listgroup]	A list group; variant flush, numbered or horizontal
[table striped="true"]...[/table]	Wraps a GFM Markdown table with Domma table CSS classes
[text size="xl" bold color="primary"]...[/text]	Styled inline text
[button href="/contact" variant="primary"]...[/button]	A link styled as a button
[link href="/about" icon="arrow-right"]...[/link]	A link with an icon or target
[center]...[/center]	Centres its content
[embed url="https://youtu.be/..." /]	YouTube, Vimeo, an uploaded video, or a page from a host allowed in config/embeds.json
[form name="slug" /]	Embeds a form from Data > Forms
[menu slug="legal" /]	Places a menu, or location="..." whatever a slot holds
[block template="post-card" title="..." /]	Renders one block template from Data > Blocks with the values given. A block can also be written as its own tag, [post-card title="..." /]
[component name="counter" /]	Mounts a component from Data > Components (same as <dm-counter>)
[demo src="elements/accordion" /]	Embeds a demo page from this site in a frame
[collection slug="..." /]	Shows a collection's entries - see below
[view slug="..." /]	Shows a saved View's results - see Views

Designing a block

Blocks live in Data > Blocks. A block is HTML with {{field}} placeholders (HTML-escaped), {{{field}}} for ready-made HTML, and {{date:DD MMM YYYY}} for dates. Its Custom CSS is scoped to the block; site-wide rules can live in Site Settings > Custom CSS instead.

The editor's preview draws the block inside your site's own page - its theme, fonts, site styles and Custom CSS - filled from the sample values, and redraws it as you type. Above the preview you can:

• switch between full, tablet (1024px) and mobile (390px) width;
• show One copy, as [block] places it, or Three in a grid, as [collection display="block" cols="3"] lists entries - use this for cards and for rules such as :nth-child(even);
• try the block in another site theme (the site itself is not changed).

Image fields get a grey picture and link fields # as samples; links in the preview do not navigate, and anything a block's HTML could run (an onerror handler, a javascript: link, a script) is removed first, as the site removes it. Ctrl+S saves even while the preview has focus. The site's floating buttons (search, theme switcher) are hidden there so they do not cover the block. Unsaved Site Settings CSS is not shown - save it first.

Collections on a page

[collection slug="team" display="cards" columns="3" title-field="name" /]
[collection slug="jobs" display="cards" searchable filterable="location,type" sortable page-size="9" where_status="open" /]
[collection slug="applications" scope="mine" display="cards" title-field="jobTitle" paginate transitions /]

Attribute	Values	Purpose
slug	collection slug	Required. Which collection to show.
display	table · cards · list · accordion · timeline · carousel · listgroup · block	How each entry is shown. Default table.
block	block template name	Required with display="block"; also works with carousel and listgroup. The template's {{field}} placeholders are filled per entry.
fields, title-field, columns	field names, 2-4	Which fields show, which one is the title, and card columns.
sort, order, limit	field, asc/desc, number	Default newest first (createdAt, desc), no limit.
where_<field>	value	Filter: where_location="London", or add an operator - _ne, _gt, _gte, _lt, _lte, _in, _nin, _contains, _starts, _ends, _exists. Filters combine with AND. The older where="field=value" still works.
scope	mine	Only the signed-in visitor's own entries; anonymous visitors are asked to sign in.
searchable, sortable, filterable, paginate	flags; filterable="a,b"	Any of these turns the block into the interactive Collection Browser: search box, sort, a filter rail built from the fields, and pages (page-size, default 12). exportable adds a CSV button.
transitions	flag	On an interactive block, each row gets buttons for the workflow actions that apply to it now. Works with scope="mine". See Actions.
cta	action slug	A button per entry that runs a CMS Action. See CTA Shortcode.
empty	text	Shown when nothing matches.

Timelines take date-field, status-field, body-field; carousels take image-field and body-field. Visitors can right-click any collection display to filter, sort, group, copy, print or export it (export follows the collection's export setting), and the state is kept in the address so it can be shared. Dates in collection displays read dd/mm/yyyy.

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. Actions need MongoDB (Pro). 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

Effects

Effects wrap content or run on the whole page: [reveal], [breathe], [pulse], [shake], [scribe], [scramble], [counter], [ripple], [twinkle], [ticker-tape], [butterflies], [strobe], [animate], [ambient], [firework], [fireworks] and [celebrate] (with shorthands such as [christmas /]). Many can also be added to a card, box, hero, banner, column or button as attributes: [card reveal reveal-animation="zoom"]. Settings are at System > Effects.

Actions on pages

[cta action="..." entry="..."]Label[/cta] places a button that runs a CMS Action for a signed-in visitor. Actions need a MongoDB connection (Pro); collections, views and everything else on this page work without one.

The page editor's Editor Reference lists every shortcode with its attributes, and its Insert menu adds them for you. Plugins can add shortcodes of their own - see Plugin guides.