Timeline

Code

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

body {
  font-family: Inter, system-ui, sans-serif;
  background: #050910;
  color: #f2f6ff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.demo {
  width: 100%;
  max-width: 560px;
}
.demo-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.375rem;
}
.demo-sub {
  color: #475569;
  font-size: 0.875rem;
  margin-bottom: 2.5rem;
}

/* ── Timeline list ── */
.timeline {
  list-style: none;
  position: relative;
  padding-left: 2.25rem;
}

/* Vertical spine */
.timeline::before {
  content: "";
  position: absolute;
  left: 0.5625rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.12) 10%,
    rgba(255, 255, 255, 0.12) 90%,
    transparent
  );
}

/* ── Timeline item ── */
.timeline-item {
  position: relative;
  padding-bottom: 2.5rem;
}
.timeline-item:last-child {
  padding-bottom: 0;
}

/* ── Marker (icon circle) ── */
.timeline-marker {
  position: absolute;
  left: -2.25rem;
  top: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Past state */
.timeline-item.past .timeline-marker {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

/* Present state */
.timeline-item.present .timeline-marker {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

/* Future state */
.timeline-item.future .timeline-marker {
  background: rgba(255, 255, 255, 0.04);
  color: #334155;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Pulse ring for present ── */
.pulse-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(56, 189, 248, 0.5);
  animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-ring {
    animation: none;
  }
}

/* ── Content card ── */
.timeline-content {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.875rem;
  padding: 1rem 1.25rem;
  transition: border-color 0.2s ease;
}

.timeline-item.past .timeline-content {
  border-color: rgba(34, 197, 94, 0.1);
}
.timeline-item.present .timeline-content {
  border-color: rgba(56, 189, 248, 0.2);
}
.timeline-item.future .timeline-content {
  opacity: 0.5;
}

.timeline-date {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 0.4rem;
}

.timeline-item.past .timeline-date {
  color: #22c55e;
}
.timeline-item.present .timeline-date {
  color: #38bdf8;
}

.timeline-heading {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.badge-now {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
}

.timeline-body {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.65;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Timeline</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="demo">
    <h1 class="demo-title">Timeline</h1>
    <p class="demo-sub">Vertical timeline with date markers and status states.</p>

    <ol class="timeline" aria-label="Project timeline">

      <li class="timeline-item past">
        <div class="timeline-marker" aria-hidden="true">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
        </div>
        <div class="timeline-content">
          <time class="timeline-date" datetime="2025-06-01">Jun 2025</time>
          <h3 class="timeline-heading">Project Kickoff</h3>
          <p class="timeline-body">Initial planning, stakeholder alignment, and repository setup. Defined MVP scope and sprint cadence.</p>
        </div>
      </li>

      <li class="timeline-item past">
        <div class="timeline-marker" aria-hidden="true">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
        </div>
        <div class="timeline-content">
          <time class="timeline-date" datetime="2025-09-15">Sep 2025</time>
          <h3 class="timeline-heading">Design System</h3>
          <p class="timeline-body">Component library published to npm. Tokens, typography, and base UI primitives finalized.</p>
        </div>
      </li>

      <li class="timeline-item past">
        <div class="timeline-marker" aria-hidden="true">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
        </div>
        <div class="timeline-content">
          <time class="timeline-date" datetime="2025-12-01">Dec 2025</time>
          <h3 class="timeline-heading">Beta Launch</h3>
          <p class="timeline-body">Private beta rolled out to 200 early-access users. Bug bash and performance audit completed.</p>
        </div>
      </li>

      <li class="timeline-item present">
        <div class="timeline-marker" aria-hidden="true">
          <span class="pulse-ring"></span>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
            <circle cx="12" cy="12" r="5"/>
          </svg>
        </div>
        <div class="timeline-content">
          <time class="timeline-date" datetime="2026-03-01">Mar 2026</time>
          <h3 class="timeline-heading">Public Launch <span class="badge-now">Now</span></h3>
          <p class="timeline-body">General availability release. Full documentation, marketing site, and onboarding flow live.</p>
        </div>
      </li>

      <li class="timeline-item future">
        <div class="timeline-marker" aria-hidden="true">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="9"/>
          </svg>
        </div>
        <div class="timeline-content">
          <time class="timeline-date" datetime="2026-06-01">Jun 2026</time>
          <h3 class="timeline-heading">v2.0 — Enterprise</h3>
          <p class="timeline-body">SSO, audit logs, team workspaces, and SLA-backed uptime targets for enterprise customers.</p>
        </div>
      </li>

    </ol>
  </div>
</body>
</html>

A vertical timeline component with date markers, status indicators, and content cards. Supports both single-column and alternating left/right layouts.

Variants

Single column — events stack left-aligned, ideal for sidebars
Alternating — events alternate left/right of the center spine for a classic timeline look

States

past — completed events with a filled accent dot
present — current event highlighted with a glowing pulse ring
future — upcoming events with a dimmed unfilled dot

Features

Pure CSS — no JavaScript required
Responsive (collapses to single column on mobile)
prefers-reduced-motion support for the pulse animation
Accessible semantic markup with <time> elements