Steps

Numbered vertical instructions for completing a task, such as paying a parking ticket.

Find your ticket details

Have your ticket number and vehicle registration ready. You’ll find both on the notice.
Choose how to pay

Follow the payment instructions on your notice. Check the amount and deadline before making a payment.
Keep your confirmation

Save your receipt or confirmation number so you can refer to it if you have a question.

Show the markup

<ol class="cc-steps" role="list" aria-label="How to pay a parking ticket">
  <li>
    <h3 class="cc-heading cc-heading--sm">Find your ticket details</h3>
    <p class="cc-paragraph">Have your ticket number and vehicle registration ready. You’ll find both on the notice.</p>
  </li>
  <li>
    <h3 class="cc-heading cc-heading--sm">Choose how to pay</h3>
    <p class="cc-paragraph">Follow the payment instructions on your notice. Check the amount and deadline before making a payment.</p>
  </li>
  <li>
    <h3 class="cc-heading cc-heading--sm">Keep your confirmation</h3>
    <p class="cc-paragraph">Save your receipt or confirmation number so you can refer to it if you have a question.</p>
  </li>
</ol>

Example wording only: replace payment methods and deadlines with the issuing authority’s instructions. See the service template for steps within a full page.

Usage and accessibility

Use an ordered list when the sequence matters. Numbers are generated automatically; do not type them into each heading.
Keep each step focused on one action. Put any related help, links, or buttons inside that step.
This is an instruction pattern, not a tab interface or a form-progress control. All steps remain visible.
Use role="list" to retain list announcements when visual markers are replaced. The connector and number decoration are not interactive.
Choose heading levels for the surrounding page. On mobile, steps keep their vertical order and text wraps beside the numbers.