Content shortcodes

These shortcodes put things on a page: styled words, badges, icons, pictures, buttons, links, videos, maps and menus. Each one has its own section below, with an example to copy and every attribute it takes.

The small ones - text, badge, icon, picture, button and link - can be written in the middle of a sentence and inside any container (cards, grids, tabs, accordions, slideovers).

text - styled words

Styles a few words: their size, weight, colour, or a gradient that shines.

[text size="xl" bold color="primary"]Styled text[/text]
[text gradient="sunset" shine="sweep"]Words painted in a gradient[/text]
## [text words]A headline that rises word by word[/text]

Attribute	What it does
size	xs, sm, base, lg, xl, 2xl, 3xl, 4xl, or a size such as 1.5em
point-size	A size in points, such as 14
weight	thin, light, normal, medium, semibold, bold, extrabold or black
bold, italic	Switches
color (or colour)	A theme name (primary, secondary, muted, danger, success, warning, info) or any CSS colour
font	A font by name: Georgia, Arial, Verdana, Courier New, Times New Roman, Trebuchet MS, and web fonts such as Roboto, Inter, Open Sans, Lato, Nunito and Poppins. The editor's form lists them all
transform	upper, lower, capitalize or none
decoration	underline, line-through or none
spacing	Space between letters: tight, normal, wide, wider, or a value such as 0.1em
align	left, center, right or justify. The text then takes a line of its own
gradient	Paints the words in a gradient: brand, sunset, ocean, forest, fire, candy, newspaper, grey-fire, ice, summer, autumn, spring, winter, aurora, twilight, rose-gold, copper, amethyst, lagoon, cherry, lavender, midnight, or two hex colours: #f26b3a,#8b5cf6
shine	With a gradient: hover (a highlight follows the pointer) or sweep (it crosses every few seconds)
light-up	Switch: the text starts dim and lights up word by word as the page scrolls
words	Switch: the text rises into view word by word
style	Your own CSS, added to the rest
class, id	Your own CSS class or id

Good to know:

• [text] tags nest, so a gradient phrase can sit inside a headline that rises word by word.
• Movement is switched off for visitors whose device asks for reduced motion; they see the text whole.
• In the editor: select words, right-click and choose Wrap selection in… > Highlight text. Right-click an existing [text] tag for one-click changes or Edit Text….

badge - a small label

A small coloured label, in a sentence or beside a heading.

[badge variant="success"]New[/badge]
[badge variant="danger" outline pill]Deprecated[/badge]
[badge variant="primary" pill /]

Attribute	What it does
variant	The colour: primary, secondary, success, danger, warning, info, light or dark
pill	Switch: fully rounded ends
outline	Switch: an outline instead of a filled label
size	small or large

The self-closing form, with no text, draws a coloured dot.

icon - an icon

One icon from the site's icon set, in line with the text.

[icon name="arrow-right" /]
[icon name="star" size="24" color="#f59e0b" /]

Attribute	What it does
name	Which icon. Required
size	Its size in pixels
color	Its colour
class	Your own CSS class

image - a picture with options

A picture with options: size, alignment, corners, a border, a shadow, a caption, and a click to see it full size. Use it instead of a plain Markdown picture when you need any of those - above all for screenshots whose small text cannot be read at page size.

[image src="/media/settings.png" alt="The settings screen" caption="Settings" zoom /]
[image src="/media/team.jpg" alt="The team" align="float-right" width="300" /]
[image src="/media/step-1.png" alt="Step 1" width="480" align="center" zoom group="tour" shadow="md" radius="md" /]
[image src="/media/logo.png" alt="Home" link="/" /]

Attribute	What it does
src	The picture: a /media/… path or a web address. Required
alt	What the picture shows, for screen readers and search engines
caption	Words under the picture, also shown in the zoom view
title	Words shown when the pointer rests on the picture
width	Its width: 480 (pixels), 60%, 30rem. Without it, the picture's own size, never wider than the column
max-width	A limit on the width
height	A set height; the picture is cropped to fill it
fit	With a height: cover (crop to fill, the default), contain, fill, none or scale-down
align	left (default), center, right, or float-left / float-right to let text wrap around it
radius	Rounded corners: sm, md, lg, full, or a length
border	Switch: a thin border
shadow	sm, md or lg
zoom	Switch: a click opens the picture full size
zoom-src	A larger file to show in the zoom view
group	Zoomable pictures with the same group name can be stepped through with arrows
link	Where a click on the picture goes. A linked picture does not zoom
target	_blank opens the link in a new tab
loading	lazy (default) or eager for a picture at the very top of a page
class, id	Your own CSS class or id

Good to know:

• On a line of its own, the picture shows its caption underneath. In the middle of a sentence it is an inline picture, and the caption shows only in the zoom view.
• In the zoom view, click to go to actual size, drag to move around, and press Esc to close.
• In the editor, Insert > Image picks from Media and opens these settings; right-click a tag and choose Edit Image… to change them.

button - a link that looks like a button

A link that looks like a button.

[button href="/contact" variant="primary"]Get in touch[/button]
[button href="/download" variant="success" icon="download" size="sm" label="Download" /]
[button href="https://example.com" variant="outline" target="_blank"]Visit site[/button]

Attribute	What it does
href	Where the button goes
label	The words on the button, for the self-closing form. In the paired form, the words go between the tags
variant	primary (default), secondary, success, danger, warning, info, outline, ghost, link, outline-success, outline-danger, outline-warning or outline-info
size	sm or lg
icon	An icon before the words
icon-after	An icon after the words
target	_blank opens in a new tab
class, id	Your own CSS class or id

A button takes the effects breathe, pulse, shake, ripple and animate as switches: [button href="/contact" pulse]Get in touch[/button].

To make a button that runs an Action rather than opening a page, use [cta] - see Data shortcodes.

link - a link with extras

A text link with extras: an icon, a new tab, your own class. For an ordinary link, plain Markdown - [words](/address) - is simpler.

[link href="/about"]About us[/link]
[link href="https://example.com" target="_blank" icon-after="external-link"]Visit site[/link]
[link href="/about" icon="arrow-right" label="About us" /]

Attribute	What it does
href	Where the link goes
label	The words, for the self-closing form
target	_blank opens in a new tab
icon	An icon before the words
icon-after	An icon after the words
class, id	Your own CSS class or id

embed - a video or another website

A video, or a page from another website, shown in a frame.

[embed url="https://youtu.be/dQw4w9WgXcQ" /]
[embed url="/media/showreel.mp4" ratio="16:9" title="Our showreel" /]
[embed url="/media/hero.mp4" autoplay muted loop /]

Attribute	What it does
url	A YouTube or Vimeo link, a video file from Media (.mp4, .webm, .ogg), or another web address. Required
ratio	The frame's shape: 16:9 (default), 4:3, 1:1, 21:9, 9:16, 3:4, or any width:height
title	A caption under the frame, also read out by screen readers
width	A limit on the width, in pixels or percent
align	left, center or right, when a width is set
autoplay	Switch: start playing straight away (the video is muted, as browsers require)
loop	Switch: play again when it ends
muted	Switch: start with the sound off

Good to know:

• YouTube and Vimeo are always allowed. YouTube videos play through its privacy-friendly player (youtube-nocookie.com).
• Any other website has to be on the site's list of allowed hosts first; until it is, the page shows a "not allowed" notice in place of the frame. On a self-hosted site the list is config/embeds.json.
• In the editor, Insert > Embed has a field for the address and a picker for videos in Media.

map - a map of one place

A Google Map of one place.

[map postcode="SW1A 2AA" zoom="15" caption="Visit us" /]
[map pin="51.5034,-0.1276" zoom="14" ratio="4:3" width="640" align="center" /]

Attribute	What it does
postcode	The place, by postcode
address	The place, by address
pin	The place, as latitude,longitude
lat, lon (or lng)	The place, as two separate numbers
zoom	1 (the world) to 20 (a building). Default 14
ratio	The map's shape: 16:9 (default), 4:3, 1:1 or 21:9
width	A limit on the width, in pixels or percent
align	left, center or right
caption (or title)	Words under the map

Give one of postcode, address, pin, or lat with lon.

demo - a demo page in a frame

Shows a demo page kept on this site inside a frame.

[demo src="elements/accordion" /]
[demo src="effects/ambient" height="600px" title="Ambient effect" /]

Attribute	What it does
src	The demo's path, without .html. Required
height	The frame's height (default 500px)
title	A caption bar above the frame
base	The folder the demos are in (default /public/demos)

Only pages on this site can be shown. For a page from another website, use [embed].

theme-switcher - the theme dots

The row of dots that lets a visitor change the site's theme, placed where you want it.

[theme-switcher /]
[theme-switcher position="bottom-left" offset-x="24" offset-y="24" /]
[theme-switcher themes="charcoal-dark,charcoal-light" /]

Attribute	What it does
position	inline (where the tag is written, the default) or pinned to the window: top-left, top-right, left-center, right-center, bottom-left, bottom-right
offset-x, offset-y	When pinned: the distance from the window's edges in pixels (default 32)
themes	A comma-separated list of themes to offer, from those chosen under Theme > Theme switcher

On its page it takes the place of the site's floating switcher, so a page never shows two.

menu - a menu inside a page

Shows one of the site's menus inside a page - a list of legal pages, for example, or the footer links.

[menu slug="legal" /]
[menu location="footer-primary" /]
[menu slug="main" orientation="horizontal" depth="1" /]

Attribute	What it does
slug	Which menu, by its name
location	Or: whichever menu is assigned to this place (navbar, footer-primary, footer-legal)
orientation	horizontal or vertical, for this placement only
depth	How many levels to show. 1 shows the top level only
variant	A different look for this placement
float	no shows the menu in the page even when it floats elsewhere
class	Your own CSS class

Good to know:

• Give slug or location, one or the other.
• A visitor sees only the items they are allowed to see.
• The page being read is highlighted, with the menu's own highlight effect.
• Menus are made and edited under Menus in the sidebar - see Navigation.