blog compact list thumbnails editorial feed blog compact list feed thumbnails articles editorial compact blog listing for many articles dense article feed with thumbnails
Blog Compact List
Fetch pattern JSON:
curl https://webspire.de/patterns/blog/compact-list.json compact-list.html
<section class="ws-blog bg-[var(--ws-blog-bg)] py-20">
<div class="mx-auto max-w-5xl px-6">
<div class="max-w-2xl">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-blog-accent)]">Insights Feed</p>
<h2 class="mt-3 text-3xl font-bold tracking-tight text-[var(--ws-blog-text)] sm:text-4xl">Recent articles and deep dives</h2>
<p class="mt-3 text-base text-[var(--ws-blog-text-soft)]">A compact listing built for fast scanning across a large editorial archive.</p>
</div>
<div class="mt-10 divide-y divide-[var(--ws-blog-border)] border-y border-[var(--ws-blog-border)]">
<article class="group py-5">
<a href="#" class="flex gap-4">
<div class="h-16 w-16 shrink-0 overflow-hidden rounded-xl bg-[var(--ws-blog-card-bg)]">
<div class="h-full w-full bg-gradient-to-br from-indigo-100 to-purple-100"></div>
</div>
<div class="min-w-0 flex-1">
<span class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]">Patterns</span>
<h3 class="mt-1 text-lg font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">Wie man eine skalierbare Pattern-Registry fuer Marketing, Produkt und Docs gleichzeitig baut</h3>
<p class="mt-1 line-clamp-2 text-sm text-[var(--ws-blog-text-soft)]">Von Namensgebung bis Registry-Struktur: welche Entscheidungen sich bei vielen Komponenten wirklich auszahlen.</p>
<div class="mt-2 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>8 Min</span>
<span>Registry</span>
</div>
</div>
</a>
</article>
<article class="group py-5">
<a href="#" class="flex gap-4">
<div class="h-16 w-16 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"></div>
</div>
<div class="min-w-0 flex-1">
<span class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]">CSS Effects</span>
<h3 class="mt-1 text-lg font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">Scroll-getriebene Animationen ohne JavaScript sauber fuer Produktseiten einsetzen</h3>
<p class="mt-1 line-clamp-2 text-sm text-[var(--ws-blog-text-soft)]">Welche Scroll-Mechaniken sich fuer Storytelling lohnen und wo sie schnell zu laut oder ornamental werden.</p>
<div class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-[var(--ws-blog-text-muted)]">
<span>18. Maerz 2026</span>
<span>6 Min</span>
<span>Scroll</span>
</div>
</div>
</a>
</article>
<article class="group py-5">
<a href="#" class="flex gap-4">
<div class="h-16 w-16 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"></div>
</div>
<div class="min-w-0 flex-1">
<span class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]">Workflow</span>
<h3 class="mt-1 text-lg font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">Agentische Workflows fuer Landingpages: Was man wirklich standardisieren sollte</h3>
<p class="mt-1 line-clamp-2 text-sm text-[var(--ws-blog-text-soft)]">Snippets, Patterns und Templates greifen nur dann sauber ineinander, wenn die Registry semantisch gepflegt ist.</p>
<div class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-[var(--ws-blog-text-muted)]">
<span>14. Maerz 2026</span>
<span>7 Min</span>
<span>AI</span>
</div>
</div>
</a>
</article>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
blogcompactlistthumbnailseditorialfeed
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | List heading and optional intro copy. |
| posts | Yes | Dense list of posts with thumbnail, title, subtitle, and meta row. |
Compact blog list for high-volume archives. Small square thumbnails keep visual rhythm, while the titles and subtitles dominate the row. Best when users need to scan a lot of articles quickly without entering a heavy card layout.