Timeline List - Free UI Component Template

Text Color #1e293b

Accent Color #6b21a8

Background Color #ffffff

Font Size (rem) 1

Max Width (px) 800

Timeline List

A sleek vertical timeline for historical events or project milestones. Features high-contrast markers and descriptive date blocks.

<!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>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --text-color: {{textColor}};
            --accent-color: {{accentColor}};
            --bg-color: {{bgColor}};
            --page-bg: #faf5ff; /* Default vibrant light purple-ash */
            --font-size: {{fontSize}}rem;
            --list-width: {{listWidth}}px;
        }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: var(--page-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 2rem;
            color: var(--text-color);
        }

.timeline-container {
            width: 100%;
            max-width: var(--list-width);
            background: var(--bg-color);
            border-radius: 28px;
            padding: 3rem;
            box-shadow: 0 20px 60px rgba(107, 33, 168, 0.08);
            font-size: var(--font-size);
        }

.timeline {
            position: relative;
            padding-left: 2rem;
            list-style: none;
        }

.timeline::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #f1f5f9;
        }

.timeline-item {
            position: relative;
            margin-bottom: 3rem;
        }
        .timeline-item:last-child { margin-bottom: 0; }

.timeline-marker {
            position: absolute;
            left: -2.35rem;
            top: 0;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--bg-color);
            border: 3px solid var(--accent-color);
            z-index: 1;
            box-shadow: 0 0 0 4px var(--bg-color);
        }

.timeline-item.important .timeline-marker {
            width: 16px;
            height: 16px;
            left: -2.5rem;
            border-width: 4px;
            background: var(--accent-color);
            box-shadow: 0 0 15px rgba(var(--accent-rgb, 107, 33, 168), 0.4);
        }

.item-date {
            font-size: 0.75em;
            font-weight: 800;
            color: var(--accent-color);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.5rem;
            display: block;
        }

.item-title {
            font-size: 1.15em;
            font-weight: 800;
            margin-bottom: 0.5rem;
            letter-spacing: -0.02em;
        }

.item-desc {
            font-size: 0.95em;
            color: var(--text-color);
            opacity: 0.7;
            line-height: 1.6;
        }

.timeline-badge {
            display: inline-block;
            margin-top: 1rem;
            padding: 0.25rem 0.75rem;
            border-radius: 6px;
            background: #f1f5f9;
            font-size: 0.75em;
            font-weight: 700;
            color: #64748b;
        }

</style>
</head>
<body style="--accent-rgb: 107, 33, 168;">

<div class="timeline-container">
        <ul class="timeline">
            <li class="timeline-item important">
                <div class="timeline-marker"></div>
                <span class="item-date">October 2026</span>
                <h3 class="item-title">Product Launch Phase 1</h3>
                <p class="item-desc">Successfully deployed the core infrastructure and initial set of UI templates. User engagement exceeded expectations by 40%.</p>
                <div class="timeline-badge">Major Release</div>
            </li>
            <li class="timeline-item">
                <div class="timeline-marker"></div>
                <span class="item-date">August 2026</span>
                <h3 class="item-title">Closed Beta Program</h3>
                <p class="item-desc">Onboarded 500 early-access users to gather feedback on the template generator and metadata schema.</p>
            </li>
            <li class="timeline-item">
                <div class="timeline-marker"></div>
                <span class="item-date">May 2026</span>
                <h3 class="item-title">Infrastructure Alpha</h3>
                <p class="item-desc">Completed the backend architecture for real-time code generation and CSS variable synchronization.</p>
                <div class="timeline-badge" style="background: rgba(var(--accent-rgb, 107, 33, 168), 0.1); color: var(--accent-color);">Internal Milestone</div>
            </li>
            <li class="timeline-item">
                <div class="timeline-marker"></div>
                <span class="item-date">Jan 2026</span>
                <h3 class="item-title">Project Kickoff</h3>
                <p class="item-desc">The vision for the project was born. Initial research into modular UI systems and atomic CSS primitives.</p>
            </li>
        </ul>
    </div>

</body>
</html>