3
Blog Archive
Chronological index of all posts, grouped by year. An archive is a navigation surface — quick to scan, minimal per-entry. Distinct from article listing, which is reverse-chronological browsing with excerpts.
Core: .flow, .stacked-list, .card
Custom Styles
A few custom styles are included in the page style block used by some of the patterns.
<style>
.archive-entry {
display: grid;
grid-template-columns: 5rem 1fr;
gap: var(--space-sm);
padding-block: var(--space-2xs);
align-items: baseline;
}
.archive-entry time {
color: var(--color-text-subtle);
font-variant-numeric: tabular-nums;
text-align: end;
}
.archive-count {
color: var(--color-text-muted);
font-weight: var(--font-weight-normal);
font-size: var(--step--1);
margin-inline-start: var(--space-xs);
}
</style>Archive by year
Each year gets a heading with a post count. Posts underneath use a two-column grid so dates align vertically
regardless of character width (tabular-nums helps too).
2026 12 posts
2025 18 posts
<div class="flow flow-space-lg" style="max-inline-size: 42rem">
<div>
<section class="flow flow-space-sm">
<h3>2026 <span class="archive-count">12 posts</span></h3>
<div class="flow flow-space-none">
<div class="archive-entry">
<time datetime="2026-04-15">Apr 15</time>
<a href="#">Building a Color System with oklch</a>
</div>
<div class="archive-entry">
<time datetime="2026-03-28">Mar 28</time>
<a href="#">Why We Chose esbuild and Stayed</a>
</div>
<div class="archive-entry">
<time datetime="2026-02-10">Feb 10</time>
<a href="#">Fluid Type Scales Without a Preprocessor</a>
</div>
<div class="archive-entry">
<time datetime="2026-01-22">Jan 22</time>
<a href="#">CSS Nesting: One Year Later</a>
</div>
</div>
</section>
</div>
<div>
<section class="flow flow-space-sm">
<h3>2025 <span class="archive-count">18 posts</span></h3>
<div class="flow flow-space-none">
<div class="archive-entry">
<time datetime="2025-12-20">Dec 20</time>
<a href="#">Year in Review: Tokens, Tooling, Tradeoffs</a>
</div>
<div class="archive-entry">
<time datetime="2025-11-04">Nov 4</time>
<a href="#">Replacing HSL with oklch: The Migration</a>
</div>
<div class="archive-entry">
<time datetime="2025-09-18">Sep 18</time>
<a href="#">Cascade Layers for Real Projects</a>
</div>
</div>
</section>
</div>
<div>
<section class="flow flow-space-sm">
<h3>2024 <span class="archive-count">9 posts</span></h3>
<div class="flow flow-space-none">
<div class="archive-entry">
<time datetime="2024-12-05">Dec 5</time>
<a href="#">Starting a CSS Library from Scratch</a>
</div>
<div class="archive-entry">
<time datetime="2024-10-14">Oct 14</time>
<a href="#">Design Tokens Without a Build Step</a>
</div>
</div>
</section>
</div>
</div>Sidebar archive
A compact archive for blog sidebars: year buckets with month links and post counts. Each year is a
<section> with a heading and its own
.stacked-list.is-compact.is-divided; sections stack with .flow.
<div class="card" style="max-inline-size: 18rem">
<div class="card-title text-1">Archive</div>
<div class="flow flow-space-sm">
<section class="flow flow-space-2xs">
<h3 class="text--1 text-medium text-subtle">2026</h3>
<ul class="stacked-list is-compact is-divided">
<li>
<article class="is-interactive">
<div><h4><a href="#">April</a></h4></div>
<div class="trailing">3</div>
</article>
</li>
<li>
<article class="is-interactive">
<div><h4><a href="#">March</a></h4></div>
<div class="trailing">4</div>
</article>
</li>
<li>
<article class="is-interactive">
<div><h4><a href="#">February</a></h4></div>
<div class="trailing">2</div>
</article>
</li>
<li>
<article class="is-interactive">
<div><h4><a href="#">January</a></h4></div>
<div class="trailing">3</div>
</article>
</li>
</ul>
</section>
<section class="flow flow-space-2xs">
<h3 class="text--1 text-medium text-subtle">2025</h3>
<ul class="stacked-list is-compact is-divided">
<li>
<article class="is-interactive">
<div><h4><a href="#">December</a></h4></div>
<div class="trailing">2</div>
</article>
</li>
<li>
<article class="is-interactive">
<div><h4><a href="#">November</a></h4></div>
<div class="trailing">3</div>
</article>
</li>
</ul>
</section>
</div>
</div>