Steps

Steps show a short sequence of actions. The timeline marks completed, current and future steps; a plain list suits an instruction without state.

Example

:::steps {current=2}
1. Create the project.
2. Add pages.
3. Publish the site.
:::

Markup

:::steps
1. A short action.
2. The next action.
3. The last action.
:::

• Inside is exactly one numbered list. Another kind of list or no list stops the build.
• Write steps briefly and in one style: “Create…”, “Add…”. Format a heading inside a step in bold, not as a ### heading.
• You can put steps inside a surface to separate them from the main text.

Variants

Look

layout=timeline shows steps on a vertical line with state marks. layout=list is a compact numbered list without marks.

:::steps {layout=list}
1. Prepare the Markdown.
2. Check the JSON.
3. Build the static site.
:::

States

Current step

current is the number of the current step, starting from 1. The steps before it are marked with a check mark as completed, the steps after it as future.

:::steps {current=3}
1. The structure is ready.
2. The pages are added.
3. Check the result.
:::

Accessibility

• Steps are a plain numbered list: screen readers read the number and text of each step.
• If current is set, the current step is marked for screen readers (aria-current="step"): the reader hears where they are. The “completed” check mark is only visual — if it matters, say so in the step text.
• The marker and the text stand in separate columns, so a large font does not make them overlap.

Parameters

See also

• Tabs — for equivalent options
• Lists and quotes
• Details