Step-by-Step List Template

A stylish and semantic template for guiding users through a process or tutorial.

This design is perfect for recipes, how-to guides, assembly instructions, or any content that requires a numbered sequence.

Screenshot of a vertical step-by-step list with styled numbers and connecting lines.

Get Source Code Preview

About this Template

This template transforms a standard HTML ordered list into an elegant visual timeline. It uses a modern CSS technique known as CSS Counters to create custom-styled numbers that sit outside the flow of text. A vertical line connects the steps to create a clear path for the user to follow. The code is self-contained and fully responsive.

Features

Semantic HTML: Uses a standard ol element which is great for accessibility and SEO.
Custom Styled Numbers: Replaces the browser's default numbering with stylish circular counters using pure CSS.
Connecting Timeline: A vertical line created with a pseudo-element visually links each step.
Self-Contained: Styles are scoped to the .steps-template class to prevent conflicts with your website's existing CSS.
Easy to Theme: Colors, sizes, and fonts can be changed by editing the CSS custom properties at the top of the style block.

Code Breakdown

The core of this template is the use of CSS Counters. On the parent ol element we use counter-reset to initialize a new counter. Then for each li element the counter-increment property increases its value.

The numbering effect happens on the ::before pseudo-element on each list item (targeted with the .steps-list-item::before selector). The content property is used to display the current value of our counter. This allows us to style the number independently from the list item's text content. The vertical line that connects the steps is created using the ::before pseudo-element on the ol element (targeted with the .steps-list::before selector). This positions it absolutely behind the list items.

Code

Here's the full code for the template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step-by-Step List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #ffffff;
            color: #333;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

/* ==========================================================================
           Step-by-Step List Component Styles - Copy from here
           ========================================================================== */
        .steps-template {
            --steps-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --primary-text-color: #212529;
            --secondary-text-color: #6c757d;
            --accent-color: #0d6efd;
            --line-color: #dee2e6;
            --counter-bg-color: #fff;
            --counter-text-color: var(--accent-color);
            --counter-border-color: var(--accent-color);
            --counter-size: 40px;
            --line-width: 2px;

font-family: var(--steps-font-family);
            color: var(--primary-text-color);
            width: 100%;
            max-width: 600px;
        }
        
        .steps-template *,
        .steps-template *::before,
        .steps-template *::after {
            box-sizing: border-box;
        }
        
        .steps-template .steps-header {
            text-align: center;
            margin-bottom: 2rem;
        }

.steps-template .steps-header h2 {
            font-size: 2.25rem;
            margin: 0 0 0.5rem 0;
        }

.steps-template .steps-list {
            list-style: none;
            padding-left: 0;
            margin-left: 20px;
            /* Creates the space for the counter and line */
            padding-left: calc(var(--counter-size) + 20px); 
            position: relative;
            counter-reset: steps-counter; /* Initialize the counter */
        }
        
        /* The connecting timeline */
        .steps-template .steps-list::before {
            content: '';
            position: absolute;
            left: calc(var(--counter-size) / 2);
            top: 20px;
            bottom: 20px;
            width: var(--line-width);
            background-color: var(--line-color);
            transform: translateX(-50%);
        }

.steps-template .steps-list-item {
            position: relative;
            padding-bottom: 2.5rem;
        }
        
        /* Hide the final trailing padding */
        .steps-template .steps-list-item:last-child {
            padding-bottom: 0;
        }

/* The custom number counter */
        .steps-template .steps-list-item::before {
            counter-increment: steps-counter; /* Increment the counter for each li */
            content: counter(steps-counter); /* Display the counter value */
            position: absolute;
            left: calc(-1 * (var(--counter-size) + 20px)); /* Position it to the left */
            top: -2px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: var(--counter-size);
            height: var(--counter-size);
            border: var(--line-width) solid var(--counter-border-color);
            border-radius: 50%;
            background-color: var(--counter-bg-color);
            color: var(--counter-text-color);
            font-weight: bold;
            font-size: 1rem;
        }

.steps-template .steps-list-item h3 {
            font-size: 1.25rem;
            margin: 0 0 0.5rem 0;
        }

.steps-template .steps-list-item p {
            margin: 0;
            color: var(--secondary-text-color);
            line-height: 1.6;
        }

</style>
</head>
<body>

<div class="steps-template">
    <div class="steps-header">
        <h2>How to Build a Time-Traveling Toaster</h2>
    </div>

<ol class="steps-list">
        <li class="steps-list-item">
            <h3>Acquire Flux Capacitor</h3>
            <p>First, you'll need a standard 1.21 gigawatt flux capacitor. These can typically be sourced from old lightning-struck clock towers or disgruntled scientists.</p>
        </li>
        <li class="steps-list-item">
            <h3>Modify Toaster Chassis</h3>
            <p>Carefully disassemble a four-slice, wide-slot toaster. Reroute the heating element coils to create a miniature temporal conduit. Use chrome polish for maximum style.</p>
        </li>
         <li class="steps-list-item">
            <h3>Integrate the Power Source</h3>
            <p>Connect the flux capacitor to the toaster's power cord. A standard wall outlet will not suffice. We recommend a portable fusion reactor for best results.</p>
        </li>
         <li class="steps-list-item">
            <h3>Calibrate the Bread-Based Chronometer</h3>
            <p>Set the "light" to "dark" dial on the toaster. This will now function as your temporal destination selector. A setting of 3 is perfect for witnessing the signing of historical documents.</p>
        </li>
    </ol>
</div>

</body>
</html>

View Output