blog featured hero-post editorial content blog featured hero editorial latest articles featured blog post layout hero article with sidebar posts
Blog Featured
Fetch pattern JSON:
curl https://webspire.de/patterns/blog/featured.json featured.html
<section class="ws-blog bg-[var(--ws-blog-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-blog-accent)]">Blog</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-blog-text)] sm:text-4xl">Featured & latest</h2>
</div>
<div class="mt-12 grid gap-8 lg:grid-cols-2">
<!-- Featured post (large) -->
<article class="group">
<div class="aspect-[16/10] overflow-hidden rounded-2xl bg-[var(--ws-blog-card-bg)]">
<div class="h-full w-full bg-gradient-to-br from-indigo-200 to-purple-200 transition group-hover:scale-105"></div>
</div>
<div class="mt-6">
<div class="flex items-center gap-3">
<span class="inline-block rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-medium text-indigo-700">Featured</span>
<span class="text-xs text-[var(--ws-blog-text-muted)]">Mar 8, 2026</span>
</div>
<h3 class="mt-3 text-2xl font-bold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">
<a href="#">The complete guide to building a pattern registry</a>
</h3>
<p class="mt-3 text-base text-[var(--ws-blog-text-soft)]">From CSS snippets to full page sections — how we built a searchable, AI-native component library that scales across frameworks.</p>
<div class="mt-4 flex items-center gap-3">
<div class="h-8 w-8 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500"></div>
<div class="text-sm">
<p class="font-medium text-[var(--ws-blog-text)]">Anna Weber</p>
<p class="text-[var(--ws-blog-text-muted)]">8 min read</p>
</div>
</div>
</div>
</article>
<!-- Secondary posts (stacked) -->
<div class="flex flex-col gap-8">
<article class="group flex gap-5">
<div class="aspect-square w-24 shrink-0 overflow-hidden rounded-xl bg-[var(--ws-blog-card-bg)]">
<div class="h-full w-full bg-gradient-to-br from-emerald-100 to-teal-100 transition group-hover:scale-105"></div>
</div>
<div>
<span class="inline-block rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Tutorial</span>
<h3 class="mt-1.5 text-base font-semibold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">
<a href="#">Scroll-driven animations without JavaScript</a>
</h3>
<div class="mt-2 flex items-center gap-2 text-xs text-[var(--ws-blog-text-muted)]">
<span>Feb 28, 2026</span>
<span aria-hidden="true">·</span>
<span>4 min read</span>
</div>
</div>
</article>
<article class="group flex gap-5">
<div class="aspect-square w-24 shrink-0 overflow-hidden rounded-xl bg-[var(--ws-blog-card-bg)]">
<div class="h-full w-full bg-gradient-to-br from-amber-100 to-orange-100 transition group-hover:scale-105"></div>
</div>
<div>
<span class="inline-block rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-medium text-amber-700">Workflow</span>
<h3 class="mt-1.5 text-base font-semibold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">
<a href="#">Using the CLI to scaffold landing pages</a>
</h3>
<div class="mt-2 flex items-center gap-2 text-xs text-[var(--ws-blog-text-muted)]">
<span>Feb 20, 2026</span>
<span aria-hidden="true">·</span>
<span>3 min read</span>
</div>
</div>
</article>
<article class="group flex gap-5">
<div class="aspect-square w-24 shrink-0 overflow-hidden rounded-xl bg-[var(--ws-blog-card-bg)]">
<div class="h-full w-full bg-gradient-to-br from-rose-100 to-pink-100 transition group-hover:scale-105"></div>
</div>
<div>
<span class="inline-block rounded-full bg-rose-100 px-2.5 py-0.5 text-xs font-medium text-rose-700">Deep dive</span>
<h3 class="mt-1.5 text-base font-semibold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">
<a href="#">Glass effects with OKLCH and fallbacks</a>
</h3>
<div class="mt-2 flex items-center gap-2 text-xs text-[var(--ws-blog-text-muted)]">
<span>Feb 14, 2026</span>
<span aria-hidden="true">·</span>
<span>6 min read</span>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
blogfeaturedhero-posteditorialcontent
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title. |
| featured | Yes | Large featured post with image, badge, title, excerpt, author. |
| posts | Yes | Stacked list of secondary posts with thumbnail. |
Split blog layout: large featured post on the left with image, badge, headline, excerpt, and author info. Three compact posts stacked on the right with square thumbnails. Responsive: stacks vertically on mobile.