Open demo

CSS code

HTML 
<ol class="mtl">
  <li class="now"><time datetime="2026-07-01">Jul 1, 2026</time><h2>v4.2 — Offline mode</h2><p>Full read-write offline support with conflict-free sync when you reconnect.</p></li>
  <li><time datetime="2026-06-12">Jun 12, 2026</time><h2>v4.1 — Command palette</h2><p>Every action is now three keystrokes away. Press ⌘K anywhere.</p></li>
  <li><time datetime="2026-05-20">May 20, 2026</time><h2>v4.0 — New editor</h2><p>Rebuilt from the ground up: twice as fast, half the memory, zero plugins required.</p></li>
  <li><time datetime="2026-04-03">Apr 3, 2026</time><h2>v3.9 — Shared views</h2><p>Save a filter, share the link, and everyone sees the same slice of the data.</p></li>
</ol>
CSS 
/* Minimal timeline: a hairline border, ring dots drawn with ::before, and type. .now fills the latest dot. */
.mtl{--mtl-ink:#191c22;--mtl-line:#e8eaef;--mtl-muted:#6b7280;--mtl-text:#565e6e;
  margin:0;padding:0 0 0 28px;list-style:none;border-left:2px solid var(--mtl-line)}
.mtl>li{position:relative;padding-bottom:34px}
.mtl>li:last-child{padding-bottom:0}
.mtl>li::before{content:"";position:absolute;left:-35px;top:5px;box-sizing:border-box;width:12px;height:12px;border-radius:50%;
  background:#fff;border:3px solid var(--mtl-ink)}
.mtl>li.now::before{background:var(--mtl-ink);box-shadow:0 0 0 4px var(--mtl-line)}
.mtl time{font-size:.76rem;font-weight:700;color:var(--mtl-muted);letter-spacing:.05em;text-transform:uppercase}
.mtl h2{margin:5px 0 4px;font-size:.98rem}
.mtl p{margin:0;font-size:.87rem;line-height:1.6;color:var(--mtl-text)}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<ol class="mtl list-unstyled mb-0 border-start border-2">
  <li class="now"><time class="fw-bold text-uppercase" datetime="2026-07-01">Jul 1, 2026</time><h2 class="fw-bold">v4.2 — Offline mode</h2><p class="mb-0">Full read-write offline support with conflict-free sync when you reconnect.</p></li>
  <li><time class="fw-bold text-uppercase" datetime="2026-06-12">Jun 12, 2026</time><h2 class="fw-bold">v4.1 — Command palette</h2><p class="mb-0">Every action is now three keystrokes away. Press ⌘K anywhere.</p></li>
  <li><time class="fw-bold text-uppercase" datetime="2026-05-20">May 20, 2026</time><h2 class="fw-bold">v4.0 — New editor</h2><p class="mb-0">Rebuilt from the ground up: twice as fast, half the memory, zero plugins required.</p></li>
  <li><time class="fw-bold text-uppercase" datetime="2026-04-03">Apr 3, 2026</time><h2 class="fw-bold">v3.9 — Shared views</h2><p class="mb-0">Save a filter, share the link, and everyone sees the same slice of the data.</p></li>
</ol>
CSS 
/* Minimal timeline: Bootstrap's .border-start draws the hairline (colour from --bs-border-color),
   the ring dots are ::before, and .now fills the latest dot. */
.mtl{--mtl-ink:#191c22;--mtl-muted:#6b7280;--mtl-text:#565e6e;--bs-border-color:#e8eaef;padding-left:28px}
.mtl>li{position:relative;padding-bottom:34px}
.mtl>li:last-child{padding-bottom:0}
.mtl>li::before{content:"";position:absolute;left:-35px;top:5px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--mtl-ink)}
.mtl>li.now::before{background:var(--mtl-ink);box-shadow:0 0 0 4px var(--bs-border-color)}
.mtl time{font-size:.76rem;color:var(--mtl-muted);letter-spacing:.05em}
.mtl h2{margin:5px 0 4px;font-size:.98rem;line-height:normal}
.mtl p{font-size:.87rem;line-height:1.6;color:var(--mtl-text)}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<ol class="border-l-2 border-[#e8eaef] pl-7">
  <li class="relative pb-[34px] last:pb-0 before:absolute before:top-[5px] before:-left-[35px] before:size-3 before:rounded-full before:border-3 before:border-[#191c22] before:bg-[#191c22] before:shadow-[0_0_0_4px_#e8eaef]"><time datetime="2026-07-01" class="text-[.76rem] font-bold tracking-[.05em] text-[#6b7280] uppercase">Jul 1, 2026</time><h2 class="mt-[5px] mb-1 text-[.98rem] font-bold">v4.2 — Offline mode</h2><p class="text-[.87rem] leading-[1.6] text-[#565e6e]">Full read-write offline support with conflict-free sync when you reconnect.</p></li>
  <li class="relative pb-[34px] last:pb-0 before:absolute before:top-[5px] before:-left-[35px] before:size-3 before:rounded-full before:border-3 before:border-[#191c22] before:bg-white"><time datetime="2026-06-12" class="text-[.76rem] font-bold tracking-[.05em] text-[#6b7280] uppercase">Jun 12, 2026</time><h2 class="mt-[5px] mb-1 text-[.98rem] font-bold">v4.1 — Command palette</h2><p class="text-[.87rem] leading-[1.6] text-[#565e6e]">Every action is now three keystrokes away. Press ⌘K anywhere.</p></li>
  <li class="relative pb-[34px] last:pb-0 before:absolute before:top-[5px] before:-left-[35px] before:size-3 before:rounded-full before:border-3 before:border-[#191c22] before:bg-white"><time datetime="2026-05-20" class="text-[.76rem] font-bold tracking-[.05em] text-[#6b7280] uppercase">May 20, 2026</time><h2 class="mt-[5px] mb-1 text-[.98rem] font-bold">v4.0 — New editor</h2><p class="text-[.87rem] leading-[1.6] text-[#565e6e]">Rebuilt from the ground up: twice as fast, half the memory, zero plugins required.</p></li>
  <li class="relative pb-[34px] last:pb-0 before:absolute before:top-[5px] before:-left-[35px] before:size-3 before:rounded-full before:border-3 before:border-[#191c22] before:bg-white"><time datetime="2026-04-03" class="text-[.76rem] font-bold tracking-[.05em] text-[#6b7280] uppercase">Apr 3, 2026</time><h2 class="mt-[5px] mb-1 text-[.98rem] font-bold">v3.9 — Shared views</h2><p class="text-[.87rem] leading-[1.6] text-[#565e6e]">Save a filter, share the link, and everyone sees the same slice of the data.</p></li>
</ol>

About this set

The quietest timeline in the pack: a 2px hairline on the left, a small ring for each entry and plain type. It is set up as a release notes page with four versions, v4.2 Offline mode down to v3.9 Shared views, each with a date, a heading and a one-line description. The newest entry has a filled dot with a soft halo, so the current release stands out without a badge or colour. Use it for changelogs, release notes, blog archives or any dated list where the content should carry the page and the timeline only needs to give it rhythm. The list is an ordered list with a left border; the rings are ::before pseudo-elements, so the markup is nothing more than a time element, a heading and a paragraph per item, and adding the class now to a different item moves the filled dot. The dates use time elements with full ISO datetime values. The grey dates were darkened to #6b7280 so they reach 4.8:1 on white. The Bootstrap version draws the hairline with .border-start and .border-2, and the Tailwind version uses border-l-2 and before: utilities.

What’s included

  • Hairline rule with ring markers drawn by ::before
  • Filled dot with a halo marks the latest entry
  • Dates in time elements with ISO datetime values
  • Date text darkened to 4.8:1 on white
  • No images, icons or JavaScript

Accessibility

Entries are an ordered list, each with a heading and a time element that carries a machine-readable date. The markers are CSS pseudo-elements and are not announced. All text meets 4.5:1, including the small uppercase dates. Nothing animates and there are no controls.

Customise it

Set --mtl-ink for the dot colour, --mtl-line for the hairline and --mtl-muted for the dates on .mtl. Bootstrap reads the hairline colour from --bs-border-color on the same element; in Tailwind change border-[#e8eaef] and the before:border colour.