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 |