Layouts | Docs

Pick a layout on the separator line: --- layout=…. Each demo below is the matching slide of the showcase deck, also available in the gallery of presentation.recit.dev.

Card grid

Markdown
--- layout=grid cols=3

# Card grid

:::card
### ⚡ Lorem
Ipsum dolor sit amet.
:::

The blocks after the title form the grid (1 to 4 columns). For a grid in the middle of a slide, wrap the cards in :::grid{cols=2}: see the Grid component on components.recit.dev.

Click the deck, then use ← → · 13 slides · 01:02Open fullscreen →

Image left, image right

Markdown
--- layout=split ratio=1:1

# Image left, image right

:::left
::image{src=./photo.svg alt="Purple gradient" fit=cover}
:::

:::right
::image{src=./logo.svg alt="Logo" fit=contain}
:::

Click the deck, then use ← → · 13 slides · 01:02Open fullscreen →

Full-height image

Markdown
--- layout=image-right image=./photo.svg alt="Illustration"

layout=image-left swaps sides, fit=contain avoids cropping.

Click the deck, then use ← → · 13 slides · 01:02Open fullscreen →

Background image

Markdown
--- layout=image image=./photo.svg overlay=0.35

Click the deck, then use ← → · 13 slides · 01:02Open fullscreen →

All layouts

Layout	Use
`default`	content at the top left
`center`	centered content; a `>` quote followed by `— Author` gets quote styling
`cover`	title page (footer hidden by default)
`section`	divider between two parts
`grid`	card grid (`cols=1..4`)
`columns`, `split`	columns made of `:::col`, `:::left`, `:::right` (`ratio=2:1`)
`image-left`, `image-right`	full-height image on one half (`image=`, `alt=`, `fit=`)
`image`	full-bleed background image (`overlay=0..1`)