Steps

Steps

Guide readers through a sequence with numbered or icon steps and a connected table of contents.

Step 1: Build a Spawning Pool#
Start your Spawning Pool early. A thriving economy is nice, but you have other plans.
Step 2: Unleash the Zerglings#
Turn your larvae into Zerglings. They're small, they're fast, and they're about to make a terrible first impression.
Step 3: Crash the mineral line#
Send the swarm straight to your opponent's workers. If the entrance is already walled off, congratulations: it's time to invent a Plan B.

Usage#

Wrap Step components in Steps.

:::Steps
:::Step{title="Create your project"}

Choose a folder for your documentation.

:::
:::Step{title="Preview the result"}

Open your documentation in the browser.

:::
:::

Steps are numbered from 1 within each group. Omit a title to use Step N.

Heading levels#

Step titles render as h3 by default. Set heading on a Step to h1, h2, h3, or h4 to choose its HTML heading element typography.

Choose a level that fits your document's heading hierarchy.

:::Steps
:::Step{title="Prepare your project" heading="h2"}

Choose a folder for your documentation.

:::
:::Step{title="Preview your project" heading="h2"}

Open your documentation in the browser.

:::
:::

Icons#

Set icon to a registered icon ID. The icon replaces the visible number without changing the sequence.

Step 1: Read the guide#
Review the instructions before you start.
Step 2: Verify your setup#
Check that everything works before continuing.

:::Steps
:::Step{title="Read the guide" icon="book"}

Review the instructions before you start.

:::
:::Step{title="Verify your setup" icon="check"}

Check that everything works before continuing.

:::
:::

Step reference#

titleDefault undefined: string; Step title. Omit to use Step N.

headingDefault undefined: "h1" | "h2" | "h3" | "h4"; Title heading level and styling. Defaults to h3; also controls table-of-contents indentation.

iconDefault undefined: IconID; Replaces the number without changing the sequence.