Skip to content
duxt

Steps

An ordered list drawn as numbered steps on a rail.

Wraps an ordered list in a stepped layout. It numbers whatever list it wraps, so the Markdown stays an ordinary list.

Usage

  1. Add the dependency.
  2. Extend the layer.
  3. Write Markdown.

API

No props. The block styles its child <ol>.

Slots

SlotWhat goes in it
defaultOne ordered list, Markdown items

Notes

Worth reaching for as soon as a step carries a code block: in a plain ordered list the fence pushes the text away from its own number, and this layout keeps the number pinned beside it.

The markers are a CSS counter on the list items, not content — a reader copying the steps gets the text without the numbering drawn twice.

Was this page helpful?