Blog index pages for community-driven blogs. Author presence, engagement signals, and tags give a social feel. These variants suit a running community blog but work for any multi-author community.
Core:.flow, .cluster, .media, .badge, .divider
Extras:.avatar
Custom Styles
A few custom styles are included in the page style block used by some of the patterns.
Rocky technical terrain, January heat, and the most beautiful aid stations I've ever seen.
Priya Kapoor··Bandera, TX
<docs-resize>
<div class="flow flow-space-lg" style="max-inline-size: 42rem">
<article>
<div class="flow flow-space-xs">
<div class="cluster gap-xs" style="--cluster-align: baseline">
<span class="article-race-badge">50 mi</span>
<span class="article-category">Race Report</span>
</div>
<h2 class="text-2 text-semibold leading-heading">
<a href="#" class="link-plain">Western States 100: DNF at Mile 62</a>
</h2>
<p class="text-muted" style="max-inline-size: 50ch">
The heat took me out. But the 62 miles I did finish taught me more than any race I've completed.
</p>
<div class="cluster gap-xs text--1 text-subtle">
<span>Sarah Chen</span>
<span>·</span>
<time datetime="2026-04-08">Apr 8, 2026</time>
<span>·</span>
<span>Olympic Valley, CA</span>
</div>
</div>
</article>
<hr class="divider"/>
<article>
<div class="flow flow-space-xs">
<div class="cluster gap-xs" style="--cluster-align: baseline">
<span class="article-race-badge">26.2 mi</span>
<span class="article-category">Race Report</span>
</div>
<h2 class="text-2 text-semibold leading-heading">
<a href="#" class="link-plain">Boston Marathon: Finally Under Three Hours</a>
</h2>
<p class="text-muted" style="max-inline-size: 50ch">
Four years of training, three previous attempts, and a pacing strategy I almost abandoned at Heartbreak Hill.
</p>
<div class="cluster gap-xs text--1 text-subtle">
<span>Marcus Webb</span>
<span>·</span>
<time datetime="2026-03-21">Mar 21, 2026</time>
<span>·</span>
<span>Boston, MA</span>
</div>
</div>
</article>
<hr class="divider"/>
<article>
<div class="flow flow-space-xs">
<div class="cluster gap-xs" style="--cluster-align: baseline">
<span class="article-race-badge">13.1 mi</span>
<span class="article-category">Race Report</span>
</div>
<h2 class="text-2 text-semibold leading-heading">
<a href="#" class="link-plain">First Half Marathon at 52: Never Too Late</a>
</h2>
<p class="text-muted" style="max-inline-size: 50ch">
I started running during lockdown. Two years later, I crossed a finish line I never imagined reaching.
</p>
<div class="cluster gap-xs text--1 text-subtle">
<span>Tom Lindqvist</span>
<span>·</span>
<time datetime="2026-03-14">Mar 14, 2026</time>
<span>·</span>
<span>Minneapolis, MN</span>
</div>
</div>
</article>
<hr class="divider"/>
<article>
<div class="flow flow-space-xs">
<div class="cluster gap-xs" style="--cluster-align: baseline">
<span class="article-race-badge">50K</span>
<span class="article-category">Race Report</span>
</div>
<h2 class="text-2 text-semibold leading-heading">
<a href="#" class="link-plain">Bandera 50K: Trail Running in Texas Hill Country</a>
</h2>
<p class="text-muted" style="max-inline-size: 50ch">
Rocky technical terrain, January heat, and the most beautiful aid stations I've ever seen.
</p>
<div class="cluster gap-xs text--1 text-subtle">
<span>Priya Kapoor</span>
<span>·</span>
<time datetime="2026-02-28">Feb 28, 2026</time>
<span>·</span>
<span>Bandera, TX</span>
</div>
</div>
</article>
</div>
</docs-resize>
Mixed content
Different entry styles for different post types. Race reports carry a distance badge, training posts lead with a category label, and discussions feel lighter. Visual variety without breaking the overall rhythm.