blog cards grid posts author avatar content blog cards posts articles author avatar grid blog post cards with author info article card grid with images
Blog Card Grid
Fetch pattern JSON:
curl https://webspire.de/patterns/blog/card.json card.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">Latest articles</h2>
<p class="mt-4 text-lg text-[var(--ws-blog-text-soft)]">Insights, tutorials, and updates from our team.</p>
</div>
<div class="mt-14 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
<article class="group rounded-2xl border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-lg">
<div class="aspect-[16/9] overflow-hidden rounded-t-2xl bg-[var(--ws-blog-card-bg)]">
<div class="h-full w-full bg-gradient-to-br from-indigo-100 to-purple-100 transition duration-300 group-hover:scale-105"></div>
</div>
<div class="p-6">
<span class="inline-block rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-medium text-indigo-700">Patterns</span>
<h3 class="mt-3 text-lg font-semibold text-[var(--ws-blog-text)]">
<a href="#" class="transition hover:text-[var(--ws-blog-accent)]">Building a hero section family from scratch</a>
</h3>
<p class="mt-2 line-clamp-2 text-sm text-[var(--ws-blog-text-soft)]">Learn how to create a base hero and derive animated, split, and image variants using the family model.</p>
<div class="mt-5 flex items-center justify-between">
<div class="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)]">Alex Rivera</p>
<p class="text-[var(--ws-blog-text-muted)]">Mar 5, 2026</p>
</div>
</div>
<a href="#" class="text-sm font-medium text-[var(--ws-blog-accent)] transition hover:opacity-80">Read more →</a>
</div>
</div>
</article>
<article class="group rounded-2xl border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-lg">
<div class="aspect-[16/9] overflow-hidden rounded-t-2xl bg-[var(--ws-blog-card-bg)]">
<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="p-6">
<span class="inline-block rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700">CSS Effects</span>
<h3 class="mt-3 text-lg font-semibold text-[var(--ws-blog-text)]">
<a href="#" class="transition hover:text-[var(--ws-blog-accent)]">Scroll-driven animations without JavaScript</a>
</h3>
<p class="mt-2 line-clamp-2 text-sm text-[var(--ws-blog-text-soft)]">Modern CSS scroll timelines replace Intersection Observer for reveal, parallax, and progress bar effects.</p>
<div class="mt-5 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="h-8 w-8 rounded-full bg-gradient-to-br from-emerald-400 to-teal-500"></div>
<div class="text-sm">
<p class="font-medium text-[var(--ws-blog-text)]">Sam Chen</p>
<p class="text-[var(--ws-blog-text-muted)]">Feb 28, 2026</p>
</div>
</div>
<a href="#" class="text-sm font-medium text-[var(--ws-blog-accent)] transition hover:opacity-80">Read more →</a>
</div>
</div>
</article>
<article class="group rounded-2xl border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-lg">
<div class="aspect-[16/9] overflow-hidden rounded-t-2xl bg-[var(--ws-blog-card-bg)]">
<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="p-6">
<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-3 text-lg font-semibold text-[var(--ws-blog-text)]">
<a href="#" class="transition hover:text-[var(--ws-blog-accent)]">Using the CLI to scaffold landing pages</a>
</h3>
<p class="mt-2 line-clamp-2 text-sm text-[var(--ws-blog-text-soft)]">Combine the Webspire CLI with AI agents to compose full landing pages from registry patterns in seconds.</p>
<div class="mt-5 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="h-8 w-8 rounded-full bg-gradient-to-br from-amber-400 to-orange-500"></div>
<div class="text-sm">
<p class="font-medium text-[var(--ws-blog-text)]">Jordan Lee</p>
<p class="text-[var(--ws-blog-text-muted)]">Feb 20, 2026</p>
</div>
</div>
<a href="#" class="text-sm font-medium text-[var(--ws-blog-accent)] transition hover:opacity-80">Read more →</a>
</div>
</div>
</article>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
blogcardsgridpostsauthoravatarcontent
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title and subtitle. |
| posts | Yes | Array of blog post cards with image, category, title, excerpt, author, and date. |
Enhanced blog card grid featuring author avatars, category tags, two-line clamped excerpts, and hover lift on cards. Each card includes an image placeholder, “Read more” link, and author meta row. Responsive: 3 → 2 → 1 columns. Dark mode supported.