Domma CMS User Manual

Component shortcodes

Updated by Darryl Waterhouse on 15 November 2026 4 min read

These shortcodes add the moving parts of a page: tabs, accordions, carousels, timelines, lists, tables, notices and countdowns. Each one has its own section below, with an example to copy and every attribute it takes.

Most of them are a pair of tags with smaller tags inside - [tabs] holds [tab]s, [accordion] holds [item]s. Markdown, cards, grids, buttons and pictures all work inside them.

tabs and tab - tabbed panels

Several panels in the same space, one shown at a time.

[tabs style="pills"]
[tab title="Overview" icon="info"]What it is.[/tab]
[tab title="Pricing"]What it costs.[/tab]
[tab title="Reviews"]What people say.[/tab]
[/tabs]
Tag Attribute What it does
[tabs] style pills for rounded buttons, or bordered to put the tabs and their panel in one box. Without it, tabs are underlined
[tabs] align center centres the tabs, right puts them at the right
[tabs] id Your own id
[tab] title The words on the tab
[tab] icon An icon before the title

accordion and item - headings that open

A stack of headings that open to show their content. Good for questions and answers.

[accordion]
[item title="Do you deliver?"]Yes, Monday to Saturday.[/item]
[item title="Can I return an order?"]Within 30 days.[/item]
[/accordion]
Tag Attribute What it does
[accordion] multiple true lets several items stay open at once. Otherwise opening one closes the others
[accordion] id Your own id
[item] title The heading that is clicked

Slides shown one at a time, with arrows to move between them.

[carousel autoplay="true" interval="5000" animation="fade"]
[slide title="Spring" image="/media/spring.jpg"]New season, new range.[/slide]
[slide title="Summer" image="/media/summer.jpg"]Now in stock.[/slide]
[slide title="A slide of text"]No picture needed.[/slide]
[/carousel]
Tag Attribute What it does
[carousel] autoplay true moves on by itself
[carousel] interval How long each slide stays, in milliseconds
[carousel] loop false stops at the last slide. Otherwise it goes round again
[carousel] animation slide, fade or crossfade (the two slides overlap for a smoother change)
[carousel] animation-duration How long the change takes, in milliseconds (default 500)
[carousel] animation-easing The pace of the change: ease, linear, ease-in-out
[carousel] height A fixed height in pixels
[carousel] height-mode With pictures of different shapes: crop (every slide as tall as the shortest picture, the default) or average
[carousel] arrow-position top, middle (default) or bottom
[carousel] background, arrow-background, arrow-color Colours for the carousel and its arrows: a CSS colour or a theme name such as primary or surface
[carousel] id Your own id
[slide] title The slide's heading
[slide] image The slide's picture

In the page editor, the picture button beside each slide chooses a picture from Media or uploads one.

timeline and event - events in order

Events in order, each with a date and a status. Also draws a roadmap.

[timeline layout="vertical" theme="modern"]
[event title="Launch" date="2025-01-15" status="completed"]
We opened the doors.
[/event]
[event title="Second shop" date="2026-06-01" status="planned"]
Opening in Leeds.
[/event]
[/timeline]
Tag Attribute What it does
[timeline] layout vertical, centred or horizontal
[timeline] theme minimal, corporate or modern
[timeline] mode timeline or roadmap
[timeline] class, id Your own CSS class or id
[event] title The event's name
[event] date When it happened or will happen
[event] status planned, in-progress, completed or blocked. The marker shows the status

listgroup and item - a bordered list

A tidy bordered list.

[listgroup variant="flush" size="sm"]
[item]**Free** delivery over £30[/item]
[item]Returns within 30 days[/item]
[item]See our [delivery page](/delivery)[/item]
[/listgroup]
Attribute What it does
variant flush (no outer border), numbered or horizontal
size sm or lg
itemvariant Colours every item: primary, secondary, success, danger, warning or info
action true highlights an item under the pointer

[item] takes no attributes. Its text can use bold, italics and links.

table - a styled table

Wraps a Markdown table to give it the site's table styling, and lets it scroll sideways on a phone instead of breaking the page.

[table striped="true" caption="Prices from March"]
| Plan    | Monthly |
| ------- | ------: |
| Starter |     £9  |
| Team    |    £29  |
[/table]
Attribute What it does
striped true shades every other row
bordered true draws lines around every cell
compact true tightens the rows
caption A title for the table
class, id Your own CSS class or id

To show the entries of a collection as a table, use [collection] instead - see Data shortcodes.

A coloured notice across the page: a warning, a piece of good news, an announcement.

[banner type="warning" title="Maintenance" icon="alert-triangle" dismissible]
The site will be read-only on **Sunday** from 8am.
[/banner]
Attribute What it does
type info (default), success, warning, danger or neutral
title A bold title above the text
icon An icon at the left
dismissible Switch: adds a close button
class Your own CSS class

Good to know:

  • A banner can go inside a card, box, column, tab or accordion item.
  • To show a banner only until a date, add expires-at - see "Showing a shortcode for a limited time" in Shortcodes.
  • A banner takes the effects reveal, pulse, shake, animate and ambient as switches.

countdown - a countdown clock

A clock counting down to a date, or for a number of seconds.

[countdown to="2026-12-31" format="DD:HH:mm:ss" /]
[countdown duration="300" format="mm:ss" /]
Attribute What it does
to The date to count down to, such as 2026-12-31 or 2026-12-31T18:00
duration Instead of a date: how many seconds to count
format mm:ss, HH:mm:ss or DD:HH:mm:ss
id Your own id