cards blog mixed-media video gallery carousel grid editorial cards blog video gallery carousel mixed-content editorial grid blog card grid with mixed media types cards with video and gallery thumbnails editorial blog layout with carousel card
Cards Mixed Content Blog
Fetch pattern JSON:
curl https://webspire.de/patterns/cards/mixed-content-blog.json mixed-content-blog.html
<section class="ws-cards bg-[var(--ws-cards-bg)]">
<div class="mx-auto max-w-7xl px-6 py-16">
<!-- Section header -->
<div class="mb-10">
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-cards-text)]">Latest articles</h2>
<p class="mt-2 text-base text-[var(--ws-cards-text-soft)]">Insights, tutorials, and deep dives from the team.</p>
</div>
<!-- Card grid -->
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<!-- Card 1: standard image -->
<article class="flex flex-col overflow-hidden rounded-2xl border" style="background-color: var(--ws-cards-bg); border-color: var(--ws-cards-border);">
<div class="aspect-video w-full" style="background: linear-gradient(135deg, #6366f1, #8b5cf6);"></div><!-- ws-ok -->
<div class="flex flex-1 flex-col p-5">
<p class="text-xs font-medium uppercase tracking-widest" style="color: var(--ws-color-accent);">Design</p>
<h3 class="mt-2 text-base font-semibold leading-snug" style="color: var(--ws-cards-text);">How design tokens accelerate your team's velocity</h3>
<p class="mt-2 flex-1 text-sm" style="color: var(--ws-cards-text-soft);">A practical guide to the three-layer token model used in Webspire.</p>
<div class="mt-4 flex items-center justify-between border-t pt-4" style="border-color: var(--ws-cards-border);">
<span class="flex items-center gap-2 text-xs" style="color: var(--ws-cards-text-soft);">
<span class="h-6 w-6 rounded-full bg-indigo-500 flex-shrink-0"></span>
<span>Alex J. · Mar 12</span>
</span>
<a href="#" class="text-xs font-medium transition hover:opacity-70" style="color: var(--ws-color-accent);">Read more</a>
</div>
</div>
</article>
<!-- Card 2: video embed placeholder -->
<article class="flex flex-col overflow-hidden rounded-2xl border" style="background-color: var(--ws-cards-bg); border-color: var(--ws-cards-border);">
<div class="relative aspect-video w-full flex items-center justify-center bg-slate-950"><!-- ws-ok -->
<!-- Play button -->
<button class="flex h-14 w-14 items-center justify-center rounded-full bg-white/20 backdrop-blur-sm transition hover:bg-white/30" aria-label="Play video">
<svg class="h-6 w-6 translate-x-0.5 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</button>
<span class="absolute bottom-3 left-3 rounded px-2 py-0.5 text-xs font-semibold text-white bg-black/60">12:34</span>
</div>
<div class="flex flex-1 flex-col p-5">
<p class="text-xs font-medium uppercase tracking-widest" style="color: var(--ws-color-accent);">Video</p>
<h3 class="mt-2 text-base font-semibold leading-snug" style="color: var(--ws-cards-text);">Building a page with Webspire MCP tools</h3>
<p class="mt-2 flex-1 text-sm" style="color: var(--ws-cards-text-soft);">Watch how to compose a full landing page from scratch in under 10 minutes.</p>
<div class="mt-4 flex items-center justify-between border-t pt-4" style="border-color: var(--ws-cards-border);">
<span class="text-xs" style="color: var(--ws-cards-text-soft);">Maria K. · Feb 28</span>
<a href="#" class="text-xs font-medium transition hover:opacity-70" style="color: var(--ws-color-accent);">Watch</a>
</div>
</div>
</article>
<!-- Card 3: mini gallery grid -->
<article class="flex flex-col overflow-hidden rounded-2xl border" style="background-color: var(--ws-cards-bg); border-color: var(--ws-cards-border);">
<!-- 2x2 thumbnail grid -->
<div class="grid grid-cols-2 gap-0.5">
<div class="aspect-square" style="background: linear-gradient(135deg, #f59e0b, #ef4444);"></div><!-- ws-ok -->
<div class="aspect-square" style="background: linear-gradient(135deg, #10b981, #0ea5e9);"></div><!-- ws-ok -->
<div class="aspect-square" style="background: linear-gradient(135deg, #ec4899, #a78bfa);"></div><!-- ws-ok -->
<div class="relative aspect-square flex items-center justify-center" style="background: linear-gradient(135deg, #6366f1, #0ea5e9);"><!-- ws-ok -->
<span class="text-xs font-bold text-white">+8</span>
</div>
</div>
<div class="flex flex-1 flex-col p-5">
<p class="text-xs font-medium uppercase tracking-widest" style="color: var(--ws-color-accent);">Gallery</p>
<h3 class="mt-2 text-base font-semibold leading-snug" style="color: var(--ws-cards-text);">Our week in photos — design sprint recap</h3>
<p class="mt-2 flex-1 text-sm" style="color: var(--ws-cards-text-soft);">A look behind the scenes of our latest pattern sprint and what we shipped.</p>
<div class="mt-4 flex items-center justify-between border-t pt-4" style="border-color: var(--ws-cards-border);">
<span class="text-xs" style="color: var(--ws-cards-text-soft);">Team · Feb 15</span>
<a href="#" class="text-xs font-medium transition hover:opacity-70" style="color: var(--ws-color-accent);">View gallery</a>
</div>
</div>
</article>
<!-- Card 4: carousel placeholder -->
<article class="flex flex-col overflow-hidden rounded-2xl border" style="background-color: var(--ws-cards-bg); border-color: var(--ws-cards-border);">
<!-- Carousel thumb area -->
<div class="relative aspect-video w-full overflow-hidden" style="background: linear-gradient(135deg, #84cc16, #0ea5e9);"><!-- ws-ok -->
<!-- Prev/next arrows -->
<button class="absolute left-2 top-1/2 -translate-y-1/2 flex h-7 w-7 items-center justify-center rounded-full bg-black/30 text-white transition hover:bg-black/50" aria-label="Previous image">
<svg class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
</button>
<button class="absolute right-2 top-1/2 -translate-y-1/2 flex h-7 w-7 items-center justify-center rounded-full bg-black/30 text-white transition hover:bg-black/50" aria-label="Next image">
<svg class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
</button>
<!-- Dot indicators -->
<div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1.5">
<span class="h-1.5 w-4 rounded-full bg-white"></span><!-- ws-ok -->
<span class="h-1.5 w-1.5 rounded-full bg-white/50"></span>
<span class="h-1.5 w-1.5 rounded-full bg-white/50"></span>
</div>
</div>
<div class="flex flex-1 flex-col p-5">
<p class="text-xs font-medium uppercase tracking-widest" style="color: var(--ws-color-accent);">Showcase</p>
<h3 class="mt-2 text-base font-semibold leading-snug" style="color: var(--ws-cards-text);">Community-built patterns — March roundup</h3>
<p class="mt-2 flex-1 text-sm" style="color: var(--ws-cards-text-soft);">The best community-contributed patterns submitted this month.</p>
<div class="mt-4 flex items-center justify-between border-t pt-4" style="border-color: var(--ws-cards-border);">
<span class="text-xs" style="color: var(--ws-cards-text-soft);">Community · Mar 1</span>
<a href="#" class="text-xs font-medium transition hover:opacity-70" style="color: var(--ws-color-accent);">Read more</a>
</div>
</div>
</article>
<!-- Card 5: standard -->
<article class="flex flex-col overflow-hidden rounded-2xl border" style="background-color: var(--ws-cards-bg); border-color: var(--ws-cards-border);">
<div class="aspect-video w-full" style="background: linear-gradient(135deg, #ec4899, #f97316);"></div><!-- ws-ok -->
<div class="flex flex-1 flex-col p-5">
<p class="text-xs font-medium uppercase tracking-widest" style="color: var(--ws-color-accent);">Engineering</p>
<h3 class="mt-2 text-base font-semibold leading-snug" style="color: var(--ws-cards-text);">Why we chose Tailwind v4 CSS-first config</h3>
<p class="mt-2 flex-1 text-sm" style="color: var(--ws-cards-text-soft);">The migration from config JS to `@theme` and what we learned.</p>
<div class="mt-4 flex items-center justify-between border-t pt-4" style="border-color: var(--ws-cards-border);">
<span class="text-xs" style="color: var(--ws-cards-text-soft);">Sam T. · Jan 30</span>
<a href="#" class="text-xs font-medium transition hover:opacity-70" style="color: var(--ws-color-accent);">Read more</a>
</div>
</div>
</article>
<!-- Card 6: standard -->
<article class="flex flex-col overflow-hidden rounded-2xl border" style="background-color: var(--ws-cards-bg); border-color: var(--ws-cards-border);">
<div class="aspect-video w-full" style="background: linear-gradient(135deg, #0ea5e9, #a78bfa);"></div><!-- ws-ok -->
<div class="flex flex-1 flex-col p-5">
<p class="text-xs font-medium uppercase tracking-widest" style="color: var(--ws-color-accent);">Design</p>
<h3 class="mt-2 text-base font-semibold leading-snug" style="color: var(--ws-cards-text);">OKLCH colors — a practical introduction</h3>
<p class="mt-2 flex-1 text-sm" style="color: var(--ws-cards-text-soft);">How perceptually uniform color values improve your palette workflow.</p>
<div class="mt-4 flex items-center justify-between border-t pt-4" style="border-color: var(--ws-cards-border);">
<span class="text-xs" style="color: var(--ws-cards-text-soft);">Lena M. · Jan 14</span>
<a href="#" class="text-xs font-medium transition hover:opacity-70" style="color: var(--ws-color-accent);">Read more</a>
</div>
</div>
</article>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
cardsblogmixed-mediavideogallerycarouselgrideditorial
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title and subtitle above the grid. |
| cards | Yes | Array of blog cards — each with a media type, category, title, description, and author/date footer. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| columns | '2' | '3' | 3 | Number of columns at large breakpoint. |
A blog card grid that handles four distinct media surface types within one unified card shell. The consistent rounded-2xl border, category badge, heading, description, and author/date footer are shared across all types — only the top media area varies.