Layout shortcodes

These shortcodes arrange a page: columns, containers, backdrops, banners at the top and panels at the side. Each one has its own section below, with an example to copy and every attribute it takes.

In the page editor, everything here is under Insert, and a right-click on a tag you have already written opens its settings. Attribute values take single or double quotes; a word on its own (hover, reveal) is a switch.

background - a backdrop for a page or section

Sets the backdrop of a page, or of one section of it.

Written on its own, it colours the whole page:

[background preset="lavender-haze" /]
[background color="#f6f4fc" /]

Written as a pair, it colours only what is between the tags:

[background preset="ocean"]
[grid cols="2" gap="3"]
[card title="Consulting"]First service.[/card]
[card title="Development"]Second service.[/card]
[/grid]
[/background]

Attribute	What it does
preset	A ready-made backdrop: lavender-haze, aurora, peach-mist, ocean, sunset, spotlight
type	solid, linear, radial or glow
color	One colour: a hex value, or a theme name (background, surface, primary, secondary, success, info, warning, danger)
colors	Two to four colours, comma separated, for a gradient. A position can follow each: #41345b 0%,#a8d4e3 65%,#fff 100%
angle	Direction of a linear gradient, 0-360 degrees
x, y	Where a radial gradient or the first glow sits, 0-100 percent
spread	How far a radial gradient or glow reaches, 10-150 percent
strength	How strong a glow's colour is, 0-100 percent

Good to know:

• A page background replaces the site's own (Content > Theme > Site background) on that page. Remove the tag and the site's comes back.
• If a page has several, the last one counts.
• A preset can be adjusted: [background preset="lavender-haze" strength="60" /].
• Backgrounds do not change text colours, so check the preview against your theme.
• In the editor: Insert > Layout > Background, or right-click a background tag and choose Edit Background…. Selecting text first wraps a section around it.

grid - equal columns

Columns of equal width. Put a [col] around each column's content.

[grid cols="3" gap="3"]
[col]First column, with **Markdown**.[/col]
[col]Second column.[/col]
[col]Third column.[/col]
[/grid]

Attribute	What it does
cols	How many columns. On a phone the grid stacks into one column, then widens on larger screens
gap	The space between columns, 1 (tight) to 6 (wide)
responsive	false keeps exactly cols columns on every screen, phones included
fullwidth	true lets the grid run wider than the text column
vertical-align	How columns of different heights line up: top, middle or bottom
class, id	Your own CSS class or id on the grid

Good to know:

• Grids nest: a grid can sit inside a column of another grid, and cards can go inside either.
• Close tags in the reverse of the order you opened them.

row - columns that share the width

Like a grid, but you do not count the columns: each [col] inside shares the width equally. A row can also bring its columns into view one after another as the visitor scrolls.

[row gap="2"]
[col]Column A[/col]
[col]Column B[/col]
[col]Column C[/col]
[/row]

[row gap="4" reveal reveal-animation="slide-up" reveal-stagger="60"]
[col]First to appear[/col]
[col]Second to appear[/col]
[col]Third to appear[/col]
[/row]

Attribute	What it does
gap	The space between columns, 1 to 6
reveal	Switch: the columns animate in when the row scrolls into view
reveal-animation	slide-up, slide-down, slide-left, slide-right, fade, zoom, flip, swoosh (rise out of a soft blur) or swoosh-sides (first from the left, last from the right)
reveal-mode	stagger (the default, one after another) or sequence
reveal-duration	How long each column's animation takes, in milliseconds (default 400)
reveal-stagger	The wait between one column and the next, in milliseconds (default 60)
reveal-delay	A wait before the first column, in milliseconds
reveal-direction	ltr (left to right, the default) or rtl
reveal-replay	Switch: play again each time the row comes back into view
tilt	Switch: each column leans toward the mouse pointer
vertical-align	top, middle or bottom
class, id	Your own CSS class or id on the row

Animations are skipped for visitors whose device asks for reduced motion.

col - one column of a grid or row

One column of a [grid] or [row]. It only works inside one of those.

[grid cols="3" gap="2"]
[col span="2"]A wide column, two of the three.[/col]
[col centre]A narrow one, centred.[/col]
[/grid]

Attribute	What it does
span	How many grid columns this one takes up
align	left, center (or centre) or right
left, center, centre, right	The same as align, as a single word: [col centre]
vertical-align	Where the content sits in a tall column: top, middle or bottom
id	Your own id on the column

A column also takes the effects reveal, breathe, ripple and animate as switches - see Effects.

center - centred content

Centres whatever is inside it.

[center]
## Opening hours
Monday to Friday, 9 to 5.
[/center]

Attribute	What it does
class	Your own CSS class on the wrapper

The tag is spelt center.

spacer - a gap

A gap between two parts of a page.

[spacer /]
[spacer size="48" /]

Attribute	What it does
size	The height of the gap in pixels. Without it, the site's standard spacer size is used
class	Your own CSS class

card - a panel with a title

A bordered panel with an optional title, icon, picture and footer. It is the most used container on most sites.

[card title="Getting started" icon="rocket"]
Follow these steps to set up your site.
[/card]

[card title="Why us" layout="icon-top" icon="star" variant="glass"]
Fast, file-based and friendly.
[/card]

[card title="Our studio" image="/media/studio.jpg" image-alt="The studio floor" overlay="Open every Saturday"]
Drop in for a tour.
[/card]

Attribute	What it does
title, subtitle	The heading and the line under it. Leave both out for a card with a body only
icon	An icon beside the title
icon-layout	inline (beside the title, the default) or stacked (above it)
icon-size	xs, sm, md, lg, xl, 2xl, or a size such as 48 or 3rem
icon-align	left, center or right
footer	Text for a strip at the bottom
layout	One of 33 ready-made designs, such as icon-top, image-top, pricing, quote-testimonial, stat-metric
variant	The look: clean, gradient, glass, accent, dark or glow
gradient	The gradient to use with variant="gradient"
image	A picture: a band across the top, or behind the body
image-position	header (a band above the title, the default) or body (behind the text)
image-height	The band's height, such as 240 or 40vh
image-alt	What the picture shows, for screen readers
overlay	Words written over the picture
overlay-position	bottom (default), center or top
collapsible	true: clicking the title opens and closes the body
hover	Switch: highlight on hover. hover="off" stops the card lifting
font	serif or mono
font-size	sm, lg or xl
text-align	center or right
padding	compact or spacious
shadow	none, md or lg
rounded	Corners: none, xs, sm, lg or full
borderless	Switch: no border
span	In a grid: how many columns the card takes, 2 to 6 or full
vertical-align	Where the content sits in a tall card: top, middle or bottom
class, id	Your own CSS class or id

Inside a card you can write three more tags when plain text is not enough:

[card]
[header]
### A title with **bold** and [a link](/about)
[/header]

The body, as usual.

[footer]
[Read more](/about)
[/footer]
[/card]

• [header] and [footer] take Markdown, and win over the title and footer attributes.
• [overlay] takes Markdown for the words over a picture, and wins over the overlay attribute.

Good to know:

• The full list of layouts, variants and gradients, with pictures, is in Shortcodes under Cards. The editor's Card builder offers all of them.
• A card takes the effects reveal, breathe, pulse, shake, twinkle, ripple, animate and ambient as switches: [card title="Why us" reveal reveal-animation="zoom"].
• Cards can go inside grids, boxes, slideovers and other cards.

box - a plain container

A card with no header: a plain container around anything. It starts with no shadow and nearly square corners.

[box]
Anything here: text, a button, a grid or a card.
[/box]

[box color="warning"]
**Heads up:** the office is closed on Friday.
[/box]

[box color="#0f766e" rounded="lg" shadow="md"]
Our own brand teal, whatever the theme.
[/box]

Attribute	What it does
color (or colour)	A theme colour (primary, secondary, success, info, warning, danger) or a hex colour
variant	As on a card: clean, glass, accent, dark, glow, gradient
shadow	none (default), md or lg
rounded	xs (default), none, sm, lg or full
padding	compact or spacious
borderless	Switch: no border
hover	off stops the box lifting under the pointer
footer	Text for a strip at the bottom
class, id	Your own CSS class or id

Good to know:

• A plain box follows the theme, light or dark. A theme colour tints it; a hex colour is kept exactly, with black or white text chosen to stay readable.
• A box never has a header: title, icon, image and layout are ignored.
• A card can sit inside a box, and a box inside a card or another box.

hero - the banner at the top of a page

The large banner at the top of a page: a title, a tagline, and a colour, gradient or picture behind them.

[hero title="Welcome" tagline="Build something great" size="lg" variant="gradient-blue"]
Optional text underneath, with **Markdown**.
[/hero]

[hero title="Walk the hills" image="/media/hills.jpg" overlay="dark" size="xl" fullwidth="true"]
[button href="/walks" variant="primary"]Book a place[/button]
[/hero]

Attribute	What it does
title, tagline	The headline and the line under it
size	sm, lg, xl (at least three quarters of the window) or full
variant	A gradient behind the text, such as gradient-blue, gradient-sunset, gradient-ocean, gradient-night, or the plain dark and primary. Each theme also has its own pair, such as gradient-forest-light and gradient-forest-dark
image	A picture behind the text
overlay	A shade over the picture so the words read: light, dark, darker, gradient or gradient-reverse
bg-x, bg-y	Which part of the picture to keep in view: left / center / right and top / center / bottom
bg-fit	cover (fill the area, cropping; the default) or contain (show the whole picture)
color (or bg)	A plain background colour
align	center or left
min-height	A least height, such as 60vh or 400px
fullwidth	true: the hero runs the full width of the window
twinkle	Switch: sparkling particles over the hero. twinkle-count and twinkle-colour adjust them
blobs	Switch: slowly drifting shapes behind the text. blobs-type picks the movement, as on [ambient]
class, id	Your own CSS class or id

A hero takes the effects reveal, breathe, pulse, twinkle, ticker-tape, butterflies, strobe, animate and ambient as switches.

slideover - a panel that slides in

A button that opens a panel sliding in from the side. What you write between the tags is what the panel shows.

[slideover title="Delivery details" trigger="Read more" size="lg"]
We deliver **Monday to Saturday**.

[card title="Next day"]Order by 3pm.[/card]
[/slideover]

Attribute	What it does
title	The heading at the top of the panel
trigger	The words on the button (default "Open")
size	The panel's width: sm, md (default), lg, xl or full
position	right (default) or left

Cards, grids and most other shortcodes work inside a slideover. Do not put a slideover inside another slideover.

contents - the "On this page" list

Changes the "On this page" list for one page. That list is built from the page's headings by a layout with a sidebar; this tag draws nothing itself, it only changes the list's settings on the page it is written on.

[contents numbered="true" headings="h2h3" title="On this page" /]
[contents side="right" collapsible="true" collapsed="true" /]
[contents hidden="true" /]

Attribute	What it does
title	The heading above the list
headings	Which headings to list: auto, h2, h3 or h2h3
exclude	Headings to leave out, comma separated
numbered	true numbers the entries
side	left or right
width	The list's width, 160-480 pixels
sticky	true keeps the list in view while the page scrolls
hidden	true hides the list on this page
collapsible, collapsed	Let the visitor fold the list away; start it folded
autohide	true tucks the list away until the pointer is near
floating	true lifts the list into a floating panel; float-anchor places it (TL, TR, BL, BR, L, R) and movable lets the visitor drag it
scroll-spy	true highlights the heading being read
hover, selected, accent	The highlight effects and colour, as on a menu
font, font-size, font-weight	The lettering

The site-wide settings are under Layouts > Page contents settings. If a page has more than one [contents], the first counts.

navbar - the navigation bar on one page

Changes the site's navigation bar for one page - for example, hiding it on scroll or collapsing it on a landing page. It draws nothing itself.

[navbar collapsed="true" /]
[navbar position="sticky" hide-on-scroll="true" /]
[navbar position="floating" float-anchor="TR" float-collapsible="true" /]

Every Behaviour setting of a menu can be written as an attribute. The ones used most:

Attribute	What it does
position	Where the bar sits, such as sticky or floating
orientation	horizontal or vertical
side, align	Which side a vertical bar is on; how its items line up
collapsible, collapsed	Let the bar fold to a rail; start it folded
autohide	true hides the bar until the pointer is near
hide-on-scroll	true hides the bar while scrolling down
width	The width of a vertical bar
bar	The bar's look: pill, segmented, underline, dock, neon, tabs, tiles, bubbles, brutalist, gradient
hover, selected, accent	The highlight effects and colour
font, font-size, font-weight, letter-spacing, icon-size	The lettering and icons
float-anchor, float-x, float-y, float-width, float-title, float-collapsible, float-movable	The floating panel's place, size, title and behaviour

Good to know:

• true and false switch a setting on or off, so a page can turn off something the menu turns on.
• The first [navbar] on a page counts.
• In the editor it is under Insert > Layout. Right-clicking the tag offers the common changes in one click.
• The menu's own settings are explained in Navigation.