Steps

Use :::steps for tutorials, install flows, and procedural docs.

Default Steps

1:::steps2 3### Install4 5Content.6 7### Configure8 9Content.10 11:::

:::steps without a variant renders the default ordered docs flow.

This is equivalent:

1:::steps {variant="default"}2 3### Install4 5Content.6 7:::

Card Steps

Card steps are for richer procedural sections. They render as a vertical numbered stack by default:

1:::steps {variant="cards" layout="stack" numbered stepTheme="cyan"}2 3### Install4 5Content.6 7### Configure8 9Content.10 11:::

Grid mode is explicit:

1:::steps {variant="cards" layout="grid" columns="2" numbered}2 3### Install4 5Content.6 7### Configure8 9Content.10 11:::

Attributes

• variant: default or cards
• layout: stack or grid for card steps
• columns: 1, 2, 3, 4, or auto for card-step grid layout
• numbered: visible generated numbers for card steps
• theme: steps wrapper theme
• stepTheme: card theme applied to individual step cards

Defaults:

• variant="default"
• layout="stack" when variant="cards"
• columns="2" when variant="cards" and layout="grid"
• numbered="true" when variant="cards"

Invalid values fall back safely and produce non-fatal diagnostics where diagnostics are available.

Nested Markdown

Code fences, callouts, details, and normal Markdown render inside steps:

1:::steps {variant="cards" stepTheme="glass"}2 3### Install4 5```bash6pnpm add @valkyrianlabs/payload-markdown7```8 9### Configure10 11:::callout {variant="tip"}12Use collection-scoped config for posts.13:::14 15:::

Themes

Built-in steps wrapper themes:

• default
• muted
• glass
• cyan

stepTheme uses card themes, so values such as default, glass, cyan, violet, emerald, amber, and danger are available by default.