A steps block renders an ordered procedure. Numbers come from CSS counters with Plumest-style circular badges; the left rail connects the steps.

Three steps

Array of strings

Install dependencies with bun install.

Run bun run dev and open http://localhost:4321.

Write your docs under src/content/docs/.

steps([
  step(`Install dependencies with ${code('bun install')}.`),
  step(`Run ${code('bun run dev')} and open http://localhost:4321.`),
  step(`Write your docs under ${code('src/content/docs/')}.`),
]);

Two steps, pre-built HTML

Single HTML string

Create a branch.

Open a pull request.

steps(
  '<div class="cpd-step">Create a branch.</div><div class="cpd-step">Open a pull request.</div>',
);

Notes

• steps(children) accepts either a string[] (each item is wrapped in .cpd-step) or a single HTML string.
• step(content) is the single-step builder used to wrap array items.