Components / Timeline
Live preview — rendered in this site's theme
Timeline
Usage
Milestones, changelog highlights, process steps. A hairline left spine with square markers keeps it editorial; round markers push it playful.
Rules
- Marker squares sit on the spine:
-left-[5px] centers a 10px square on a 1px border.
- Latest/active milestone gets
bg-primary; past ones stay neutral at 30%.
- Last item drops the spine (
border-l-0) so the line doesn't dangle.
- Dates in mono caps; titles in the display face; descriptions one line each.
- For long timelines add scroll-reveal stagger (80ms per item).
HTML Copy-paste source
<ul class="max-w-lg mx-auto space-y-0">
<li class="relative pl-8 pb-8 border-l border-base-content/15 ml-2">
<span class="absolute -left-[5px] top-1 w-2.5 h-2.5 bg-primary"></span>
<p class="font-mono text-xs tracking-[0.12em] text-base-content/50">2026 · Q1</p>
<h4 class="mt-1 text-lg font-medium tracking-tight" style="font-family:'Fraunces',serif">Library opens</h4>
<p class="text-sm text-base-content/70 mt-1">First 40 items: styles, themes, and the core guides.</p>
</li>
<li class="relative pl-8 pb-8 border-l border-base-content/15 ml-2">
<span class="absolute -left-[5px] top-1 w-2.5 h-2.5 bg-base-content/30"></span>
<p class="font-mono text-xs tracking-[0.12em] text-base-content/50">2026 · Q2</p>
<h4 class="mt-1 text-lg font-medium tracking-tight" style="font-family:'Fraunces',serif">Collections launch</h4>
<p class="text-sm text-base-content/70 mt-1">Curated stacks that cross categories.</p>
</li>
<li class="relative pl-8 pb-2 border-l-0 ml-2">
<span class="absolute -left-[5px] top-1 w-2.5 h-2.5 bg-base-content/30"></span>
<p class="font-mono text-xs tracking-[0.12em] text-base-content/50">2026 · Q3</p>
<h4 class="mt-1 text-lg font-medium tracking-tight" style="font-family:'Fraunces',serif">Community submissions</h4>
<p class="text-sm text-base-content/70 mt-1">The contribute form goes public.</p>
</li>
</ul>