blog sidebar two-column categories recent-posts blog sidebar two-column categories recent posts articles layout blog layout with sidebar two-column blog page
Blog Sidebar
Fetch pattern JSON:
curl https://webspire.de/patterns/blog/sidebar.json sidebar.html
<section class="ws-blog bg-[var(--ws-blog-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="grid gap-12 lg:grid-cols-3">
<!-- Articles -->
<div class="lg:col-span-2">
<h2 class="text-2xl font-bold text-[var(--ws-blog-text)]">Latest articles</h2>
<div class="mt-8 space-y-10">
<article class="flex flex-col gap-4 sm:flex-row sm:gap-6">
<div class="aspect-[3/2] w-full rounded-xl bg-gradient-to-br from-slate-200 to-slate-300 sm:w-48 sm:flex-shrink-0" aria-hidden="true"></div>
<div>
<span class="text-xs font-semibold text-[var(--ws-blog-accent)]">Engineering</span>
<h3 class="mt-1 text-lg font-semibold text-[var(--ws-blog-text)]"><a href="#" class="hover:text-[var(--ws-blog-accent)]">Building scalable design systems with Tailwind</a></h3>
<p class="mt-2 text-sm text-[var(--ws-blog-text-soft)]">Learn how to structure your Tailwind CSS for large-scale applications with consistent patterns and tokens.</p>
<time class="mt-3 block text-xs text-[var(--ws-blog-text-muted)]">Mar 8, 2026</time>
</div>
</article>
<article class="flex flex-col gap-4 sm:flex-row sm:gap-6">
<div class="aspect-[3/2] w-full rounded-xl bg-gradient-to-br from-slate-200 to-slate-300 sm:w-48 sm:flex-shrink-0" aria-hidden="true"></div>
<div>
<span class="text-xs font-semibold text-[var(--ws-blog-accent)]">Product</span>
<h3 class="mt-1 text-lg font-semibold text-[var(--ws-blog-text)]"><a href="#" class="hover:text-[var(--ws-blog-accent)]">Introducing Webspire CLI v2</a></h3>
<p class="mt-2 text-sm text-[var(--ws-blog-text-soft)]">Add production-ready UI patterns to any project with a single command. Here's what's new.</p>
<time class="mt-3 block text-xs text-[var(--ws-blog-text-muted)]">Mar 5, 2026</time>
</div>
</article>
<article class="flex flex-col gap-4 sm:flex-row sm:gap-6">
<div class="aspect-[3/2] w-full rounded-xl bg-gradient-to-br from-slate-200 to-slate-300 sm:w-48 sm:flex-shrink-0" aria-hidden="true"></div>
<div>
<span class="text-xs font-semibold text-[var(--ws-blog-accent)]">Tutorial</span>
<h3 class="mt-1 text-lg font-semibold text-[var(--ws-blog-text)]"><a href="#" class="hover:text-[var(--ws-blog-accent)]">From zero to landing page in 10 minutes</a></h3>
<p class="mt-2 text-sm text-[var(--ws-blog-text-soft)]">A step-by-step guide to composing a complete landing page using Webspire patterns.</p>
<time class="mt-3 block text-xs text-[var(--ws-blog-text-muted)]">Mar 1, 2026</time>
</div>
</article>
</div>
</div>
<!-- Sidebar -->
<aside class="lg:sticky lg:top-8 lg:self-start">
<div class="rounded-xl border border-[var(--ws-blog-border)] p-6">
<h3 class="text-sm font-semibold uppercase tracking-wider text-[var(--ws-blog-text)]">Categories</h3>
<ul class="mt-4 space-y-2">
<li><a href="#" class="flex justify-between text-sm text-[var(--ws-blog-text-soft)] hover:text-[var(--ws-blog-accent)]"><span>Engineering</span><span class="text-[var(--ws-blog-text-muted)]">12</span></a></li>
<li><a href="#" class="flex justify-between text-sm text-[var(--ws-blog-text-soft)] hover:text-[var(--ws-blog-accent)]"><span>Product</span><span class="text-[var(--ws-blog-text-muted)]">8</span></a></li>
<li><a href="#" class="flex justify-between text-sm text-[var(--ws-blog-text-soft)] hover:text-[var(--ws-blog-accent)]"><span>Tutorial</span><span class="text-[var(--ws-blog-text-muted)]">15</span></a></li>
<li><a href="#" class="flex justify-between text-sm text-[var(--ws-blog-text-soft)] hover:text-[var(--ws-blog-accent)]"><span>Design</span><span class="text-[var(--ws-blog-text-muted)]">6</span></a></li>
<li><a href="#" class="flex justify-between text-sm text-[var(--ws-blog-text-soft)] hover:text-[var(--ws-blog-accent)]"><span>Company</span><span class="text-[var(--ws-blog-text-muted)]">4</span></a></li>
</ul>
</div>
<div class="mt-6 rounded-xl border border-[var(--ws-blog-border)] p-6">
<h3 class="text-sm font-semibold uppercase tracking-wider text-[var(--ws-blog-text)]">Recent posts</h3>
<ul class="mt-4 space-y-4">
<li><a href="#" class="block text-sm font-medium text-[var(--ws-blog-text)] hover:text-[var(--ws-blog-accent)]">Building scalable design systems</a><time class="text-xs text-[var(--ws-blog-text-muted)]">Mar 8, 2026</time></li>
<li><a href="#" class="block text-sm font-medium text-[var(--ws-blog-text)] hover:text-[var(--ws-blog-accent)]">Introducing Webspire CLI v2</a><time class="text-xs text-[var(--ws-blog-text-muted)]">Mar 5, 2026</time></li>
<li><a href="#" class="block text-sm font-medium text-[var(--ws-blog-text)] hover:text-[var(--ws-blog-accent)]">From zero to landing page</a><time class="text-xs text-[var(--ws-blog-text-muted)]">Mar 1, 2026</time></li>
</ul>
</div>
</aside>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
blogsidebartwo-columncategoriesrecent-posts
Slots
| Name | Required | Description |
|---|---|---|
| articles | Yes | Main column with blog post cards. |
| sidebar | Yes | Sidebar with categories list and recent posts. |
Two-column blog layout. Left column (2/3 width) shows article cards with thumbnail, category badge, title, excerpt, and date. Right column (1/3 width) has a sticky sidebar with category links (with counts) and recent posts list. Stacks on mobile.