Layout

View Markdown llms.txt

By default, the content of a slide is stacked from top to bottom, aligned to the left and centered vertically. To change that, you configure the slide on the --- line and use layout blocks.

Slide attributes

Attributes in braces on the --- line apply to the whole slide:

--- {align=center valign=bottom bg=blue color=white pad="lg 2xl"}
# Wrapping up
Thank you for your time.

The most common ones:

Attribute	What it does	Example
`align`	Horizontal alignment of the content: `left`, `center` or `right`	`align=center`
`valign`	Vertical alignment of the content: `top`, `center` or `bottom`	`valign=top`
`bg`	Background color or gradient	`bg=ink..violet`
`color`	Text color	`color=white`
`image`	Background image	`image=https://…`
`pad`	Inner margin: one value, or two (vertical and horizontal)	`pad="lg 2xl"`
`gap`	Space between the blocks of the slide	`gap=lg`
`#id`	Slide identifier	`#cover`
`.style`	Applies a built-in style or one of your own	`.dark`

A slide accepts any style attribute. See the full list in Attributes.

Layout blocks

A layout block starts with ::: followed by its name and ends with a line containing only :::. The block attributes go in braces on the opening line:

::: columns {gap=xl}
Content of the first column

Content of the second column
:::

Each direct block inside a layout is an item: a heading, a paragraph, a list, an image or another layout block. A ::: on its own always closes the most recently opened block. Indentation is optional and only helps readability.

Columns

::: columns places each item side by side. Use widths for the proportions and gap for the space between the columns:

# Why change now
::: columns {widths="2 1" gap=xl valign=top}
::: stack {gap=sm}
## The landscape
The market doubled in two years.
Customers expect faster answers.
:::
::: box {.card}
## Goal
Cut lead time in half.
:::
:::

Attribute	What it does
`widths`	Proportion of each column, separated by spaces. `widths="2 1"` makes the first column twice as wide as the second. Without it, the columns share the space equally.
`gap`	Space between the columns.
`valign`	Vertical alignment of the columns: `top`, `center` (default) or `bottom`.

Stack

::: stack stacks its items from top to bottom. It is useful to group several blocks into a single column or to control the space between them with gap:

::: stack {gap=xs}
Chapter 1 {.kicker}
# Where we stand
An overview of the market in 2026. {.lead}
:::

Row

::: row places its items side by side, each as wide as its own content. With wrap, items that do not fit move to the next line:

# Technologies
::: row {gap=lg wrap}
:: icon database {size=3xl color=accent}
:: icon cloud {size=3xl color=blue}
:: icon shield {size=3xl color=green}
:: icon cpu {size=3xl color=violet}
:::

Attribute	What it does
`gap`	Space between the items.
`wrap`	Wraps onto a new line when the items do not fit.
`align`	Horizontal position of the items: `left`, `center` or `right`.
`valign`	Vertical alignment of the items: `top`, `center` (default) or `bottom`.

Grid

::: grid lays its items out in columns of equal width and creates new rows as needed. Set the number of columns with cols, from 1 to 12. Without cols, the grid uses one column per item, up to a maximum of three:

# Key figures
::: grid {cols=2 gap=md}
::: box {.card}
## 94
active customers {.muted}
:::
::: box {.card}
## 38%
annual growth {.muted}
:::
::: box {.card}
## 4.8
satisfaction score {.muted}
:::
::: box {.card}
## 12
countries served {.muted}
:::
:::

Box

::: box groups stacked items, like a stack, and is the simplest way to give a set of blocks a background, border, rounded corners and shadow. The built-in .card style applies all of that at once:

::: box {.card align=center gap=xs}
:: icon rocket {size=3xl color=accent}
## Launch
Available to every customer in March.
:::

Nesting blocks

Layout blocks can sit inside one another. Each ::: on its own closes the most recently opened block, so the structure reads from the inside out:

::: columns {gap=xl}
::: stack {gap=sm}
## Before
- Manual reports
- Mismatched data
:::
::: box {.card gap=sm}
## After
::: row {gap=sm}
:: icon check {size=xl color=green}
Automatic reports
:::
::: row {gap=sm}
:: icon check {size=xl color=green}
A single source of data
:::
:::
:::

Alignment

In Folio, align is always horizontal and valign is always vertical, in any block and any layout direction. You do not need to think about axes:

::: columns {gap=lg}
::: box {.card h=600 align=center valign=center}
## Center
:::
::: box {.card h=600 align=right valign=bottom}
## Corner
:::
:::

Attribute	Values
`align`	`left`, `center`, `right`
`valign`	`top`, `center`, `bottom`

Size and absolute position

The w and h attributes set width and height. They accept pixels (480), a percentage (50%), full or auto.

The x and y attributes take a block out of the flow and place it at an exact point on the slide, measured in pixels from the top-left corner. A 16:9 slide is 1920 × 1080 pixels:

# Launching in March
The schedule is confirmed for every team.

Confidential {x=1560 y=64 .kicker}

::: box {x=1360 y=760 w=440 bg=accent color=white pad=md radius=lg}
Final deadline: March 31
:::

Spacer and divider

Two single-line blocks help adjust the rhythm of the slide:

:: spacer creates empty space. Add the size after the name, using the spacing scale (xs to 3xl) or pixels. Without a value, the space is md.
:: divider draws a horizontal line. Change its color with bg and its width with w.

# Agenda
:: divider {w=160 bg=accent}
:: spacer lg
1. Context
2. Proposal
3. Next steps

Next steps

Styling: colors, sizes, borders and reusable styles.
Components: turn repeated layouts into reusable blocks.
Blocks reference: every block and its attributes.