Shortcodes

Shortcodes are blocks in your markdown that create layouts and components beyond standard markdown: grids, galleries, hero images, and more. They use ::: block syntax.

:::grid 2
Column one content.
+++
Column two content.
:::

Arity rule for nesting

When one shortcode lives inside another, the inner fence uses more colons than the outer. A :::grid (3 colons) contains ::::buttons (4 colons); ::::buttons could contain :::::callout (5 colons), and so on. Each fence's closing delimiter must match its opener exactly.

:::grid 2 2:3 {.hero-split}
# Pitch deck

::::buttons {.inverted}
[Download PDF](https://example.com/deck.pdf)
[Request intro](mailto:[email protected])
::::
---
Contact info
:::

Pages that never nested fences continue to work unchanged.

Nesting two fences at the same colon count emits a build warning and renders as literal text.

Cell dividers

Inside :::grid and :::buttons, cells are separated by a line containing only +++. A block with no +++ is a single cell.

--- is the standard markdown thematic break, a horizontal rule. It is never a moss cell control character. Use +++ to split cells.

Configuration

Pass options in the attribute block, not the body. For example: :::subscribe {placeholder="..." button="..."} or :::grid {cols=2} (the positional form :::grid 2 also works). Descriptive prose belongs above or below the block, not inside the option line.

Shortcodes

ShortcodeDescription
gridMulti-column layout with optional ratio and CSS classes
heroFull-width hero section with background image and overlay text
galleryImage grid for photo galleries
buttonsStyled row of buttons from markdown links
Fenced DivsNamed-class fenced divs for styled regions
Published with moss