blog card article author eyebrow rich metadata read-more blog card article author avatar eyebrow read-time metadata editorial blog article card with author avatar and read time rich article card with eyebrow label and metadata editorial post card with author row and read article link
Blog Rich Card
Fetch pattern JSON:
curl https://webspire.de/patterns/blog/rich-card.json rich-card.html
<article class="ws-blog group flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-color-border)] bg-[var(--ws-blog-card-bg)] transition-shadow hover:shadow-md">
<!-- Thumbnail -->
<a href="#" class="block aspect-video overflow-hidden">
<img src="https://picsum.photos/seed/blog-rich/800/450" alt="How Gemini understands images" class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
</a>
<div class="flex flex-1 flex-col p-6">
<!-- Eyebrow (text, not pill) -->
<p class="text-xs font-semibold uppercase tracking-[0.15em] text-[var(--ws-blog-accent)]">AI & Research</p>
<!-- Title -->
<h3 class="mt-2 text-lg font-bold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">
<a href="#">How Gemini understands images, audio, and text simultaneously</a>
</h3>
<!-- Description -->
<p class="mt-3 flex-1 text-sm leading-relaxed text-[var(--ws-blog-text-soft)]">A behind-the-scenes look at the multimodal architecture that lets Gemini reason across modalities in a single forward pass.</p>
<!-- Author row -->
<div class="mt-5 flex items-center justify-between gap-4">
<div class="flex items-center gap-2.5">
<img src="https://i.pravatar.cc/32?img=47" alt="Priya Shankar" class="h-8 w-8 shrink-0 rounded-full object-cover">
<div class="text-xs">
<p class="font-semibold text-[var(--ws-blog-text)]">Priya Shankar</p>
<p class="text-[var(--ws-blog-text-muted)]">Mar 26, 2026 · 8 min read</p>
</div>
</div>
<a href="#" class="inline-flex shrink-0 items-center gap-1 text-xs font-semibold text-[var(--ws-blog-accent)] hover:underline">
Read article
<svg class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
</a>
</div>
</div>
</article>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
blogcardarticleauthoreyebrowrichmetadataread-more
Slots
| Name | Required | Description |
|---|---|---|
| thumbnail | Yes | Aspect-video image that scales on group-hover. |
| eyebrow | Yes | Category label as colored uppercase text (not a pill badge). |
| title | Yes | Bold article title that links to the article. |
| description | No | Two-line article summary. |
| author | Yes | Circular author avatar, name, publication date, and read time. |
| read-link | No | Inline "Read article" link with animated arrow on group-hover. |
Standalone article card with a richer metadata treatment than blog/card. Key differences: eyebrow is colored uppercase text (not a pill badge), the author row includes a “Read article →” link with a hover-animated arrow, and the kind is component (not section) — meant to be used as a building block inside grids. Inspired by Google’s editorial card treatment with prominent bylines.