# Step-by-step reveal

> Show a slide's content gradually, one block, item or phrase at a time.

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:

```folio
# 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:

```folio
# 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`:

```folio
::: 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}`.

```folio
# 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.

```folio
# 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](/docs/en/guides/presenting/).

:::note
The editor preview, the thumbnails, the version history and the exported PDF show each slide in its final state, with every step revealed.
:::

## 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`. |