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{2  variant="cards"3  layout="stack"4  numbered5  stepTheme="cyan"6}7 8### Install9 10Content.11 12### Configure13 14Content.15 16:::

Grid mode is explicit:

1:::steps{2  variant="cards"3  layout="grid"4  columns="2"5  numbered6}7 8### Install9 10Content.11 12### Configure13 14Content.15 16:::

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{2  variant="cards"3  stepTheme="glass"4}5 6### Install7 8```bash9pnpm add @valkyrianlabs/payload-markdown10```11 12### Configure13 14:::callout[Use scoped config]{variant="tip"}15Use collection-scoped config for posts.16:::17 18:::

Step Grouping

The renderer groups step content by h2, h3, or h4 headings. Start each step with a heading and keep subheadings below that level inside the step content.

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.