resources cards link-card grid content-type guide video docs tutorial developer resources guide video docs tutorial article content-type cards developer learning resource cards with content type badges developer resources grid guide video docs learning resources section with categorized cards
Resource Grid
Fetch pattern JSON:
curl https://webspire.de/patterns/link-card/resource-grid.json resource-grid.html
<section class="ws-link-card bg-[var(--ws-link-card-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
<div>
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-link-card-accent)]">Resources</p>
<h2 class="mt-2 text-2xl font-bold tracking-tight text-[var(--ws-link-card-text)] sm:text-3xl">Learn and get started</h2>
</div>
<a href="#" class="inline-flex shrink-0 items-center gap-1 text-sm font-medium text-[var(--ws-link-card-accent)] hover:underline">
View all resources
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
<div class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<!-- Guide card -->
<a href="#" class="group flex flex-col rounded-2xl border border-[var(--ws-link-card-border)] bg-[var(--ws-link-card-card-bg)] p-6 transition-all hover:border-[var(--ws-link-card-accent)] hover:shadow-sm">
<div class="flex items-start justify-between">
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-violet-100 text-violet-600">
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
</span>
<span class="rounded-full border border-violet-200 bg-violet-50 px-2 py-0.5 text-xs font-medium text-violet-700">Guide</span>
</div>
<h3 class="mt-4 font-semibold text-[var(--ws-link-card-text)] group-hover:text-[var(--ws-link-card-accent)]">Quickstart: Build your first voice agent</h3>
<p class="mt-2 flex-1 text-sm text-[var(--ws-link-card-text-muted)]">Get a voice AI agent running in under 10 minutes. Uses Python and the Agents SDK with a hosted LLM and STT.</p>
<span class="mt-4 inline-flex items-center gap-1 text-xs font-medium text-[var(--ws-link-card-accent)]">
Read guide
<svg class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</span>
</a>
<!-- Video card -->
<a href="#" class="group flex flex-col rounded-2xl border border-[var(--ws-link-card-border)] bg-[var(--ws-link-card-card-bg)] p-6 transition-all hover:border-[var(--ws-link-card-accent)] hover:shadow-sm">
<div class="flex items-start justify-between">
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-rose-100 text-rose-600">
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</span>
<span class="rounded-full border border-rose-200 bg-rose-50 px-2 py-0.5 text-xs font-medium text-rose-700">Video</span>
</div>
<h3 class="mt-4 font-semibold text-[var(--ws-link-card-text)] group-hover:text-[var(--ws-link-card-accent)]">Deep dive: WebRTC architecture explained</h3>
<p class="mt-2 flex-1 text-sm text-[var(--ws-link-card-text-muted)]">20-minute walkthrough of how the media transport layer works and how to optimize for low latency applications.</p>
<span class="mt-4 inline-flex items-center gap-1 text-xs font-medium text-[var(--ws-link-card-accent)]">
Watch video
<svg class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</span>
</a>
<!-- Docs card -->
<a href="#" class="group flex flex-col rounded-2xl border border-[var(--ws-link-card-border)] bg-[var(--ws-link-card-card-bg)] p-6 transition-all hover:border-[var(--ws-link-card-accent)] hover:shadow-sm">
<div class="flex items-start justify-between">
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-sky-100 text-sky-600">
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
</span>
<span class="rounded-full border border-sky-200 bg-sky-50 px-2 py-0.5 text-xs font-medium text-sky-700">Docs</span>
</div>
<h3 class="mt-4 font-semibold text-[var(--ws-link-card-text)] group-hover:text-[var(--ws-link-card-accent)]">API reference: Agents SDK</h3>
<p class="mt-2 flex-1 text-sm text-[var(--ws-link-card-text-muted)]">Complete API reference for the Agents framework — events, lifecycle hooks, STT/TTS adapters, and session management.</p>
<span class="mt-4 inline-flex items-center gap-1 text-xs font-medium text-[var(--ws-link-card-accent)]">
Open docs
<svg class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</span>
</a>
<!-- Tutorial card -->
<a href="#" class="group flex flex-col rounded-2xl border border-[var(--ws-link-card-border)] bg-[var(--ws-link-card-card-bg)] p-6 transition-all hover:border-[var(--ws-link-card-accent)] hover:shadow-sm">
<div class="flex items-start justify-between">
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-amber-100 text-amber-600">
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
</span>
<span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700">Tutorial</span>
</div>
<h3 class="mt-4 font-semibold text-[var(--ws-link-card-text)] group-hover:text-[var(--ws-link-card-accent)]">Deploy your agent to production</h3>
<p class="mt-2 flex-1 text-sm text-[var(--ws-link-card-text-muted)]">Step-by-step tutorial covering containerization, environment config, scaling workers, and monitoring in production.</p>
<span class="mt-4 inline-flex items-center gap-1 text-xs font-medium text-[var(--ws-link-card-accent)]">
Follow tutorial
<svg class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</span>
</a>
<!-- Changelog / Release card -->
<a href="#" class="group flex flex-col rounded-2xl border border-[var(--ws-link-card-border)] bg-[var(--ws-link-card-card-bg)] p-6 transition-all hover:border-[var(--ws-link-card-accent)] hover:shadow-sm">
<div class="flex items-start justify-between">
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-emerald-100 text-emerald-600">
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
</span>
<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700">What's new</span>
</div>
<h3 class="mt-4 font-semibold text-[var(--ws-link-card-text)] group-hover:text-[var(--ws-link-card-accent)]">Agents SDK v1.0 release notes</h3>
<p class="mt-2 flex-1 text-sm text-[var(--ws-link-card-text-muted)]">Stable API, improved pipeline performance, new STT adapters for Whisper and Deepgram, and breaking changes from beta.</p>
<span class="mt-4 inline-flex items-center gap-1 text-xs font-medium text-[var(--ws-link-card-accent)]">
See what's new
<svg class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</span>
</a>
<!-- Blog / Article card -->
<a href="#" class="group flex flex-col rounded-2xl border border-[var(--ws-link-card-border)] bg-[var(--ws-link-card-card-bg)] p-6 transition-all hover:border-[var(--ws-link-card-accent)] hover:shadow-sm">
<div class="flex items-start justify-between">
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-100 text-slate-600">
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/></svg>
</span>
<span class="rounded-full border border-slate-200 bg-slate-50 px-2 py-0.5 text-xs font-medium text-slate-600">Article</span>
</div>
<h3 class="mt-4 font-semibold text-[var(--ws-link-card-text)] group-hover:text-[var(--ws-link-card-accent)]">How we reduced voice latency to under 300ms</h3>
<p class="mt-2 flex-1 text-sm text-[var(--ws-link-card-text-muted)]">Engineering deep-dive into the pipeline optimizations, edge deployment, and adaptive jitter buffer that made it possible.</p>
<span class="mt-4 inline-flex items-center gap-1 text-xs font-medium text-[var(--ws-link-card-accent)]">
Read article
<svg class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</span>
</a>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
resourcescardslink-cardgridcontent-typeguidevideodocstutorialdeveloper
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title, eyebrow, and optional "View all" link. |
| cards | Yes | Resource cards — each with type icon, type badge, title, description, and CTA label. |
A 3-column grid of resource link cards, each differentiated by content type through a color-coded icon badge (Guide/Video/Docs/Tutorial/What’s new/Article). On hover the card border highlights and the CTA arrow shifts. Inspired by LiveKit’s resource discovery pattern — effective for developer platforms that offer multiple content types alongside product documentation.