126Procedure

Numbered steps for a how-to. A mono index in the margin with a connecting rail, so a step containing a code block does not push its own number out of alignment — the failure of every list-style version of this.

Use it for

Setup guides, migrations, anything with an order
Steps that contain code, images or callouts

Not for

Unordered checks — that is Checklist
A flow the reader is inside — that is Stepper

With a code step

Authorise the org
Use the alias you will reference later.
Retrieve the metadata
The number stays aligned even with a block below it.
Run the tests
Local tests only, so a failure is yours.

markup

<ol class="ns-procedure">
  <li><span class="ns-procedure__title">Authorise the org</span><p class="ns-card__text">Use the alias you will reference later.</p></li>
  <li><span class="ns-procedure__title">Retrieve the metadata</span><p class="ns-card__text">The number stays aligned even with a block below it.</p></li>
  <li><span class="ns-procedure__title">Run the tests</span><p class="ns-card__text">Local tests only, so a failure is yours.</p></li>
</ol>

Accessibility contract

A real ordered list; the visible numbers come from a CSS counter so they can never drift from the list order