blog magazine editorial asymmetric-grid featured blog magazine grid editorial hero featured articles magazine style blog layout asymmetric article grid with hero story
Blog Magazine Grid
Fetch pattern JSON:
curl https://webspire.de/patterns/blog/magazine-grid.json magazine-grid.html
<section class="ws-blog bg-[var(--ws-blog-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="max-w-2xl">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-blog-accent)]">Featured Stories</p>
<h2 class="mt-3 text-3xl font-bold tracking-tight text-[var(--ws-blog-text)] sm:text-4xl">Editorial picks this month</h2>
<p class="mt-3 text-base text-[var(--ws-blog-text-soft)]">A magazine-style top area with one lead story and a tighter supporting grid.</p>
</div>
<div class="mt-12 grid grid-cols-1 gap-6 md:grid-cols-3">
<article class="group md:col-span-2 md:row-span-2">
<a href="#" class="block h-full rounded-[1.75rem] border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] p-4 md:p-5">
<div class="aspect-square overflow-hidden rounded-[1.4rem]">
<div class="h-full w-full bg-gradient-to-br from-indigo-100 via-purple-100 to-fuchsia-100 transition duration-300 group-hover:scale-105"></div>
</div>
<div class="mt-5">
<span class="inline-flex rounded-full bg-indigo-100 px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-indigo-700">Lead Story</span>
<h3 class="mt-3 text-2xl font-semibold leading-tight text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)] sm:text-3xl">Wie moderne Registry-Systeme Design, Entwicklung und agentische Workflows auf dieselbe Inhaltsbasis stellen</h3>
<p class="mt-3 max-w-2xl text-sm leading-7 text-[var(--ws-blog-text-soft)]">Eine praxisnahe Einordnung, warum Snippets, Patterns und Templates nur dann wirklich skalieren, wenn ihre Inhalte und Vorschauen dieselbe Sprache sprechen.</p>
<div class="mt-5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-[var(--ws-blog-text-muted)]">
<span>21. Maerz 2026</span>
<span>10 Min</span>
<span>Registry Strategy</span>
</div>
</div>
</a>
</article>
<article class="group">
<a href="#" class="block rounded-[1.5rem] border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] p-4">
<div class="aspect-square overflow-hidden rounded-[1.15rem]">
<div class="h-full w-full bg-gradient-to-br from-emerald-100 to-teal-100 transition duration-300 group-hover:scale-105"></div>
</div>
<div class="mt-4">
<span class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]">CSS</span>
<h3 class="mt-2 text-lg font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">Scroll-Timelines als Layout-Werkzeug</h3>
</div>
</a>
</article>
<article class="group">
<a href="#" class="block rounded-[1.5rem] border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] p-4">
<div class="aspect-square overflow-hidden rounded-[1.15rem]">
<div class="h-full w-full bg-gradient-to-br from-amber-100 to-orange-100 transition duration-300 group-hover:scale-105"></div>
</div>
<div class="mt-4">
<span class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]">Workflow</span>
<h3 class="mt-2 text-lg font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">Was gute Demo-Inhalte leisten muessen</h3>
</div>
</a>
</article>
<article class="group">
<a href="#" class="block rounded-[1.5rem] border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] p-4">
<div class="aspect-square overflow-hidden rounded-[1.15rem]">
<div class="h-full w-full bg-gradient-to-br from-sky-100 to-cyan-100 transition duration-300 group-hover:scale-105"></div>
</div>
<div class="mt-4">
<span class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]">Design</span>
<h3 class="mt-2 text-lg font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">Materialsysteme fuer Premium-Surfaces</h3>
</div>
</a>
</article>
<article class="group">
<a href="#" class="block rounded-[1.5rem] border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] p-4">
<div class="aspect-square overflow-hidden rounded-[1.15rem]">
<div class="h-full w-full bg-gradient-to-br from-rose-100 to-pink-100 transition duration-300 group-hover:scale-105"></div>
</div>
<div class="mt-4">
<span class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]">Content</span>
<h3 class="mt-2 text-lg font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">Warum Startseiten semantisch klar sein muessen</h3>
</div>
</a>
</article>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
blogmagazineeditorialasymmetric-gridfeatured
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Editorial heading block. |
| featured | Yes | Large lead article. |
| posts | Yes | Smaller supporting stories arranged around the lead story. |
Magazine-style featured layout for editorial pages and curated content hubs. One lead story anchors the section, while smaller stories support it without flattening the hierarchy. Use it above a denser main listing, not as the archive itself.