Step-by-step reveal

View Markdown llms.txt

Revealing content step by step helps the audience follow your reasoning: each point appears when you get to it, not all at once. Folio offers two ways to do this: the ::: steps block and the step attribute.

The `steps` block

Everything inside ::: steps appears in order, one at a time, each time you move forward:

# Why change now
::: steps {gap=md}
Operating costs rose 18% in one year.

Competitors have already automated customer service.

Customers expect same-day answers.
:::

Each child block (a paragraph, a heading, an image, another block) is one step.

Lists

When the child is a list, each item becomes a step:

# Plan for the semester
::: steps
- Map the current processes
- Choose the tools
- Train the teams
- Measure the results
:::

The steps block arranges its children in a vertical stack and accepts the same attributes as ::: stack, such as gap and align.

Explicit steps with `step`

To control the order yourself, add the step=N attribute to any block. The block appears at step N:

::: columns {gap=xl}
::: box {.card}
## Today
Reports built by hand, once a month.
:::
::: box {.card step=1}
## In six months
Automatic reports, updated every day.
:::
:::

The attribute also works on:

list items: - Third point {step=3};
text spans: The goal is to [double revenue]{step=1 color=accent}.;
components: :: metric {value=38% label="growth" step=2}.

# Goal for 2027
Revenue was $12 million. [The goal is to reach $20 million.]{step=1 color=accent weight=bold}

Step numbers go from 1 to 99. Several elements with the same number appear together.

How steps combine

Elements without a step are visible from the start of the slide.
The slide has as many steps as the highest number used in it.
A ::: steps block continues counting from the highest step that appeared before it on the slide. If a heading has {step=2} and a ::: steps with three items follows it, the items land on steps 3, 4 and 5.
Inside a ::: steps block, the order is set by the block itself. Do not use step on its direct children.

# Results {step=1}
::: steps
- Revenue: +38%
- Customers: +94
- Satisfaction: 4.8
:::

In this example, the heading appears at step 1 and the items at steps 2, 3 and 4.

Navigating through steps

When presenting, each move forward shows the next step of the current slide. Once every step is visible, the next move goes to the following slide.

→, Space or a click move forward one step.
← goes back one step. Going back from the start of a slide takes you to the previous slide with all its steps already revealed.
The footer in Present mode shows the current step, such as 3 / 10 · step 2/4.
In Presenter mode, the side panel shows the Next step while the current slide still has steps left.

See every shortcut in Presenting.

Common errors

Code	When it happens
F301	`step` with no value or with a value that is not a whole number from 1 to 99, such as `{step}`, `step=0` or `step=a`.