This article renders every custom block the platform supports, so you can see how each one looks. For the copy-paste syntax, see the Styleguide.

Every block below is written in plain Markdown using the ::: name … ::: pattern. Open this file in content/articles/ to see exactly how it's done.

Callouts

Use callouts to draw attention to a note, tip, or warning. There are five variants:

Note

This is a note — neutral, for general asides.

Info

This is info — supporting detail that's good to know.

Tip

This is a tip — a helpful suggestion or shortcut.

Warning

This is a warning — something to be careful about.

Danger

This is danger — a serious caution the reader shouldn't miss.

Pull quotes

Pull a memorable line out of the flow, with optional attribution after a ---:

The best camera is the one that's with you.

Chase Jarvis

And without attribution:

Light makes photography. Embrace light. Admire it. Love it.

Figures

A figure is an image with an optional caption (after a ---):

A placeholder landscape

A wide landscape — the caption sits centered beneath the image.

Lead paragraph

Wrap an intro in ::: lead to make it larger than body text. (See the top of this article.)

List group

Turn an ordinary Markdown list into a bordered, divided group:

  • First item in the group
  • Second item, separated by a divider
  • Third item

Buttons

Render one or more Markdown links as buttons:

Get in touch

View the gallery

Stats

Highlight a single number with a label beneath it (split by ---):

12

years behind the lens

300+

shoots delivered

:::

Accordion

Collapsible detail — the summary is written right after ::: details. It uses the browser's native <details> element, so it needs no JavaScript:

What's your typical turnaround time?

Most galleries are delivered within two weeks of the shoot.

Do you travel for shoots?

Yes — travel within the region is included; further afield is quoted per trip.

Hero / banner

A hero is a centered banner with a heading, supporting text, and an optional call-to-action button (after a ---):

Let's work together

Booking is open for late summer.

Enquire now

A hero can also use a background image — add the image URL right after ::: hero:

On location

Natural light, real moments.

See recent work

Two-column

Place content side by side; each --- starts a new column. Columns stack on narrow screens:

Left column. Good for comparisons, before/after notes, or just balancing text and an image.

Right column. On mobile this drops below the left column automatically.

Footnotes & code

The classic Markdown features still work — footnotes[1] and syntax-highlighted code:

const greeting: string = "Hello, world";
console.log(greeting);

  1. Footnotes appear as a hover preview on desktop and a tap popup on mobile. ↩︎