Español"How it works" steps section (HTML and CSS)
Write one step per line. On phones, the horizontal version turns vertical on its own.
How to useThree steps and the customer gets it
Available in: 
"How it works" steps section (HTML and CSS): what it is for
A section with three or four steps explains in seconds how to hire, order or book, and answers the question that makes visitors leave. Write one step per line and choose the layout: horizontal with a dashed line linking the numbers, vertical with the line on the side, or cards.
The code uses an ordered list (ol) and CSS counters for the numbers, which screen readers read correctly, turns vertical on phones and can end with a call-to-action button, such as a WhatsApp link.
How to use
- Write the steps, one per line.
- Choose the layout, color and button.
- Copy the code into your site.
When to use it
- How to hire a service.
- How to place an order.
- How an app or course works.
Frequently asked questions
How many steps should I use?
Three or four is ideal: visitors glance at it and understand the process. If yours has more steps, merge similar ones; details can go on an FAQ page.
Why does the code use an ordered list?
Steps have an order, and an ordered list (ol) tells screen readers so; they announce 'list with 3 items' and the number of each one. The big numbers are drawn by CSS counters, without repeating the number in the text.
Can I add a button at the end?
Yes, and it is recommended: after explaining how it works, offer the next step. Fill in the button text and link and it appears below the steps.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.