Horizontal Step List

The Horizontal Step List is a structured, list-based widget designed to break down complex procedures into digestible, easy-to-read segments. Unlike card-based layouts, this widget adopts a row-based approach where each step is presented horizontally, creating a strong vertical rhythm down the page. Each row is clearly demarcated by a numbered circle (1, 2, 3) on the left, establishing a clear sequence of events.

This layout is particularly effective for technical documentation, form instructions, or detailed service breakdowns where text density is higher. The design features a subtle border between items to separate content without adding visual clutter. To the right of the main step title, there is ample space for descriptive text or bullet points, allowing you to elaborate on the specifics of each phase. A unique feature of this design is the ability to include status indicators or small warning notes (like the yellow dots in the reference), adding a layer of meta-information to the process. It is a highly functional, no-nonsense widget that prioritizing readability and information hierarchy above all else.