# Steps and Step

> For the complete documentation index, see [llms.txt](https://preview.writedocs.io/llms.txt).

A numbered procedure, with a line connecting its steps.

`Steps` numbers its `Step`s and connects them with a line - for a procedure the reader follows in order. A step holds any content: text, code blocks, images, other components.

**1. Write a page**

Create an `.mdx` file, and list it in `writedocs.json`'s navigation.

**2. Preview it**

```bash
writedocs dev
```

**3. Publish**

Push your changes - the site is built and published from there.

````mdx
<Steps>
  <Step title="Write a page">
    Create an `.mdx` file, and list it in `writedocs.json`'s navigation.
  </Step>
  <Step title="Preview it">
    ```bash
    writedocs dev
    ```
  </Step>
  <Step title="Publish">
    Push your changes - the site is built and published from there.
  </Step>
</Steps>
````

## Icons

`icon` shows an icon in a step's circle, in place of its number. The steps after it keep counting:

**1. Sign up**

Create an account.

**2. Create a key**

This is step 2, even though step 1 shows an icon.

**3. Done**

You're ready to send requests.

```mdx
<Steps>
  <Step title="Sign up" icon="user-plus">Create an account.</Step>
  <Step title="Create a key">This is step 2, even though step 1 shows an icon.</Step>
  <Step title="Done" icon="check">You're ready to send requests.</Step>
</Steps>
```

## Starting at another number

`stepNumber` sets a step's number, and the steps after it continue from there - for a procedure that continues after other content:

**4. Deploy**

Steps 1 to 3 were on the previous page.

**5. Check the logs**

This one is 5.

```mdx
<Steps>
  <Step title="Deploy" stepNumber={4}>Steps 1 to 3 were on the previous page.</Step>
  <Step title="Check the logs">This one is 5.</Step>
</Steps>
```

## Titles as headings

`titleSize` makes a step's title a heading - `h2` or `h3` - bigger than the usual bold title, for steps that are each a section of their own:

**1. Configure the webhook**

Add your endpoint's URL in the dashboard.

**2. Verify the signature**

Check the `Acme-Signature` header on every request.

```mdx
<Steps>
  <Step title="Configure the webhook" titleSize="h3">...</Step>
  <Step title="Verify the signature" titleSize="h3">...</Step>
</Steps>
```

## Without titles

A step's `title` is optional:

**1.**

Open the dashboard.

**2.**

Click **Settings**.

## Step props

**`title`** `string`

The step's title, in bold above its content.

**`icon`** `string`

An icon in the step's circle, in place of its number - any [icon](https://preview.writedocs.io/docs/content/components/icon/#icons).

**`stepNumber`** `number`

The step's number. The steps after it continue from it.

**`titleSize`** `"p" | "h2" | "h3"` default: `p`

`h2` or `h3` shows the title as a heading of that level, in place of bold text.

`Steps` has no props.