Styleguide — Content Blocks

A copy-paste reference for every custom block you can use in articles and pages. To see them rendered, read the Component Showcase.

The pattern is always the same: open with ::: name, write your content, close with :::. Where a block has more than one part, a line containing just --- separates the parts.

Lead paragraph

A larger introductory paragraph.

::: lead
Your opening paragraph goes here.
:::

Callout

A note, tip, or warning box. The word after callout is the variant — one of note, info, tip, warning, danger. Leave it off for a plain note.

::: callout warning
Be careful with this part.
:::

Pull quote

A large, centered quote. Add an attribution after --- (optional).

::: pullquote
The quote you want to highlight.
---
Who said it
:::

Figure

An image with an optional caption after ---.

::: figure
![Describe the image](https://example.com/photo.jpg)
---
The caption beneath the image.
:::

List group

A bordered, divided list. Write a normal Markdown list inside.

::: list-group
- First item
- Second item
- Third item
:::

Button

One or more Markdown links rendered as buttons.

::: button
[Get in touch](/about)
:::

Stat

A big number with a label beneath it, split by ---.

::: stat
300+
---
shoots delivered
:::

Accordion

Collapsible detail. The summary text goes on the same line as ::: details.

::: details What's your turnaround time?
Most galleries are delivered within two weeks.
:::

A centered banner. Optional call-to-action after ---. For a background image, put the image URL right after ::: hero.

::: hero
## Heading
Supporting text.
---
[Call to action](/about)
:::

::: hero https://example.com/banner.jpg
## Heading over an image
---
[Call to action](/about)
:::

Two-column

Side-by-side content. Each --- starts a new column (you can have more than two). Columns stack on mobile.

::: two-column
Left column content.
---
Right column content.
:::

Tips

You can nest blocks (e.g. a stat inside a two-column).
Leave a blank line before and after each block so Markdown parses it cleanly.
Headings inside content still appear in the table of contents — add {notoc} after a heading to exclude it.