Cards, Lists, and Content Organization
Vertical timeline

A responsive timeline for showcasing project progress and key milestones.
HTMLCSSTimelineLayout
With JavaScript enabled, you can edit, run, and save this example. The fixed source is as follows:
<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Vertical timeline</title>
  <style>
    * { box-sizing: border-box; }
    body { min-height: 100vh; margin: 0; padding: clamp(34px, 7vw, 80px) 20px; color: #f2eee6; font-family: "Optima", "Microsoft YaHei", sans-serif; background: #152d2a; background-image: linear-gradient(30deg, rgba(255,255,255,.025) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.025) 87.5%); background-size: 36px 62px; }
    main { width: min(850px, 100%); margin: auto; }
    header { margin-bottom: 44px; }
    .year { color: #eeb95e; font-size: 12px; font-weight: 800; letter-spacing: .25em; }
    h1 { margin: 10px 0 12px; font: 700 clamp(40px, 8vw, 72px)/1 "STKaiti", "KaiTi", serif; }
    header p { max-width: 590px; margin: 0; color: #aebfba; line-height: 1.7; }
    .timeline { position: relative; }
    .timeline::before { content: ""; position: absolute; left: 104px; top: 12px; bottom: 12px; width: 1px; background: linear-gradient(#eeb95e, rgba(238,185,94,.1)); }
    article { position: relative; display: grid; grid-template-columns: 82px 1fr; gap: 52px; padding-bottom: 42px; }
    article:last-child { padding-bottom: 0; }
    time { padding-top: 5px; color: #eeb95e; font: 700 13px/1.2 ui-monospace, monospace; text-align: right; }
    .marker { position: absolute; left: 98px; top: 7px; width: 13px; height: 13px; border: 3px solid #152d2a; border-radius: 50%; background: #eeb95e; box-shadow: 0 0 0 1px #eeb95e, 0 0 22px rgba(238,185,94,.5); }
    .event { padding: 0 0 30px; border-bottom: 1px solid rgba(255,255,255,.12); }
    article:last-child .event { border-bottom: 0; }
    .event small { color: #70b8a7; font-size: 11px; font-weight: 800; letter-spacing: .15em; }
    h2 { margin: 8px 0 10px; font: 700 clamp(24px, 4vw, 34px)/1.2 Georgia, "STSong", serif; }
    .event p { margin: 0; color: #aebfba; line-height: 1.7; }
    .tag { display: inline-block; margin-top: 16px; padding: 6px 10px; border: 1px solid rgba(238,185,94,.38); border-radius: 999px; color: #eeb95e; font-size: 11px; }
    @media (max-width: 580px) { .timeline::before { left: 8px; } article { grid-template-columns: 1fr; gap: 8px; padding-left: 34px; } time { text-align: left; } .marker { left: 2px; } }
  </style>
</head>
<body>
  <main>
    <header><span class="year">MILESTONES · 2026</span><h1>The Journey of a Seed</h1><p>From the first sketch to the moment the product reaches users, every milestone deserves to be carefully recorded.</p></header>
    <section class="timeline" aria-label="Project Timeline">
      <article><time datetime="2026-01">01 / JAN</time><i class="marker" aria-hidden="true"></i><div class="event"><small>IDEA</small><h2>Concept germination</h2><p>The team interviewed twelve users over three days and organized the most important usage scenarios and core hypotheses.</p><span class="tag">Direction Confirmed</span></div></article>
      <article><time datetime="2026-03">18 / MAR</time><i class="marker" aria-hidden="true"></i><div class="event"><small>PROTOTYPE</small><h2>First prototype</h2><p>The low-fidelity prototype is complete, and the key path has been streamlined from seven steps to four after two rounds of testing.</p><span class="tag">Experience verification</span></div></article>
      <article><time datetime="2026-05">06 / MAY</time><i class="marker" aria-hidden="true"></i><div class="event"><small>BUILD</small><h2>Enter Development</h2><p>The design system, data model, and basic components were rolled out in sync, and the first complete business flow is now up and running.</p><span class="tag">Feature complete</span></div></article>
      <article><time datetime="2026-07">20 / JUL</time><i class="marker" aria-hidden="true"></i><div class="event"><small>LAUNCH</small><h2>Ready to Depart</h2><p>Complete performance and accessibility checks, invite the first wave of users to try it, and a new journey is about to begin.</p><span class="tag">Coming soon</span></div></article>
    </section>
  </main>
</body>
</html>