Timeline List Template

A vertical timeline list for displaying events or milestones in chronological order.

This template creates a visually engaging way to present company history, project roadmaps, or step-by-step processes.

A screenshot of a vertical timeline list with items branching off a central line.

About this Template

This component uses a semantic ordered list (ol) as its foundation. The timeline effect is created entirely with CSS, using the ::before and ::after pseudo-elements on the list and its items. A central vertical line is drawn behind the list items, and each item has a "dot" that connects it visually to the central line. This is a robust, CSS-only approach that keeps the HTML structure clean and meaningful.

Features

Pure CSS Timeline: The visual timeline structure is created with pseudo-elements, requiring no extra HTML elements for styling.
Semantic Markup: Uses an ol for a list of items that occur in a specific order.
Self-Contained Code: All styles are scoped within the .timeline-template class to prevent conflicts with your website's CSS.
Easy Customization: Key properties like colors, line thickness, and spacing are defined in CSS variables for simple themeing.

Code Breakdown

The timeline is built on a single ol element with the class .timeline. First, we use the ::before pseudo-element on the list itself to draw the main vertical line down the center of the list's padding area.

Then, we use the ::before pseudo-element on each list item (li) to create the "dot" on the timeline. This dot is absolutely positioned to sit precisely on top of the central vertical line. The text content of each list item is pushed away from this central line using padding.

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>Timeline 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: #f8fafc;
            color: #475569;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

/* ==========================================================================
           Timeline List Component Styles - Copy from here
           ========================================================================== */
        .timeline-template {
            --timeline-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --timeline-primary-text-color: #1e293b;
            --timeline-secondary-text-color: #64748b;
            --timeline-line-color: #cbd5e1;
            --timeline-dot-bg: #ffffff;
            --timeline-accent-color: #4f46e5;
            
            font-family: var(--timeline-font-family);
            color: var(--timeline-primary-text-color);
            width: 100%;
            max-width: 700px;
        }

.timeline-template *,
        .timeline-template *::before,
        .timeline-template *::after {
            box-sizing: border-box;
        }
        
        .timeline-template .timeline-header {
            text-align: center;
            margin-bottom: 3rem;
        }

.timeline-template .timeline-header h2 {
            font-size: 2rem;
            margin: 0;
        }
        
        .timeline {
            list-style: none;
            padding: 0;
            margin: 0;
            position: relative;
        }

/* The main vertical line */
        .timeline::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 7px; /* Position in the center of the padding/dot area */
            width: 2px;
            background-color: var(--timeline-line-color);
        }

.timeline-item {
            position: relative;
            padding-left: 3rem; /* Space for the line and dot */
            padding-bottom: 2.5rem;
        }
        
        .timeline-item:last-child {
            padding-bottom: 0;
        }

/* The dot on the timeline for each item */
        .timeline-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 4px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: var(--timeline-dot-bg);
            border: 3px solid var(--timeline-accent-color);
        }
        
        .timeline-item .item-header {
            margin-bottom: 0.5rem;
        }
        
        .timeline-item .item-date {
            font-weight: 600;
            color: var(--timeline-accent-color);
        }

.timeline-item .item-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin: 0;
        }
        
        .timeline-item p {
            margin: 0;
            line-height: 1.6;
            color: var(--timeline-secondary-text-color);
        }

</style>
</head>
<body>

<div class="timeline-template">
    <header class="timeline-header">
        <h2>A Brief History of FloofCorp</h2>
    </header>

<ol class="timeline">
        <li class="timeline-item">
            <header class="item-header">
                <time datetime="2021-01-15" class="item-date">January 15, 2021</time>
                <h3 class="item-title">The Spark of an Idea</h3>
            </header>
            <p>Founder has a dream about a self-toasting toaster. FloofCorp is conceived on a napkin, which immediately catches fire.</p>
        </li>
         <li class="timeline-item">
            <header class="item-header">
                <time datetime="2022-06-01" class="item-date">June 1, 2022</time>
                <h3 class="item-title">Secured Seed Funding</h3>
            </header>
            <p>A team of venture capitalists, impressed by our confidence and lack of a business plan, invests heavily. We buy a foosball table.</p>
        </li>
        <li class="timeline-item">
            <header class="item-header">
                <time datetime="2023-03-20" class="item-date">March 20, 2023</time>
                <h3 class="item-title">The Great Pivot</h3>
            </header>
            <p>After the toaster incident, the company pivots to creating a cloud-based platform for organizing sock drawers. The foosball table remains.</p>
        </li>
        <li class="timeline-item">
            <header class="item-header">
                <time datetime="2024-05-10" class="item-date">May 10, 2024</time>
                <h3 class="item-title">Reached Unicorn Status</h3>
            </header>
            <p>The Sock Organizer 9000 becomes a viral sensation. We are valued at a billion dollars. The foosball table is now gold-plated.</p>
        </li>
    </ol>
</div>

</body>
</html>

View Output