link card grid navigation documentation link card grid navigation documentation hub directory grid of link cards two-column navigation card layout
Link Card Grid
Fetch pattern JSON:
curl https://webspire.de/patterns/link-card/grid.json grid.html
<div class="ws-link-card grid grid-cols-1 gap-4 sm:grid-cols-2">
<a href="#" class="group rounded-xl border border-[var(--ws-link-card-border)] bg-[var(--ws-link-card-bg)] p-6 transition hover:border-[var(--ws-link-card-hover-border)] hover:shadow-md">
<div class="flex items-start justify-between">
<div>
<h3 class="text-base font-semibold text-[var(--ws-link-card-text)] group-hover:text-[var(--ws-link-card-accent)]">Installation</h3>
<p class="mt-1 text-sm text-[var(--ws-link-card-text-soft)]">Step-by-step setup guide for all platforms.</p>
</div>
<svg class="h-5 w-5 shrink-0 text-[var(--ws-link-card-text-soft)] transition group-hover:translate-x-1 group-hover:text-[var(--ws-link-card-accent)]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd" />
</svg>
</div>
</a>
<a href="#" class="group rounded-xl border border-[var(--ws-link-card-border)] bg-[var(--ws-link-card-bg)] p-6 transition hover:border-[var(--ws-link-card-hover-border)] hover:shadow-md">
<div class="flex items-start justify-between">
<div>
<h3 class="text-base font-semibold text-[var(--ws-link-card-text)] group-hover:text-[var(--ws-link-card-accent)]">Configuration</h3>
<p class="mt-1 text-sm text-[var(--ws-link-card-text-soft)]">Customize settings and environment variables.</p>
</div>
<svg class="h-5 w-5 shrink-0 text-[var(--ws-link-card-text-soft)] transition group-hover:translate-x-1 group-hover:text-[var(--ws-link-card-accent)]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd" />
</svg>
</div>
</a>
<a href="#" class="group rounded-xl border border-[var(--ws-link-card-border)] bg-[var(--ws-link-card-bg)] p-6 transition hover:border-[var(--ws-link-card-hover-border)] hover:shadow-md">
<div class="flex items-start justify-between">
<div>
<h3 class="text-base font-semibold text-[var(--ws-link-card-text)] group-hover:text-[var(--ws-link-card-accent)]">Components</h3>
<p class="mt-1 text-sm text-[var(--ws-link-card-text-soft)]">Browse the full component library and examples.</p>
</div>
<svg class="h-5 w-5 shrink-0 text-[var(--ws-link-card-text-soft)] transition group-hover:translate-x-1 group-hover:text-[var(--ws-link-card-accent)]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd" />
</svg>
</div>
</a>
<a href="#" class="group rounded-xl border border-[var(--ws-link-card-border)] bg-[var(--ws-link-card-bg)] p-6 transition hover:border-[var(--ws-link-card-hover-border)] hover:shadow-md">
<div class="flex items-start justify-between">
<div>
<h3 class="text-base font-semibold text-[var(--ws-link-card-text)] group-hover:text-[var(--ws-link-card-accent)]">Deployment</h3>
<p class="mt-1 text-sm text-[var(--ws-link-card-text-soft)]">Ship to production with zero-config hosting.</p>
</div>
<svg class="h-5 w-5 shrink-0 text-[var(--ws-link-card-text-soft)] transition group-hover:translate-x-1 group-hover:text-[var(--ws-link-card-accent)]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd" />
</svg>
</div>
</a>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
linkcardgridnavigationdocumentation
Slots
| Name | Required | Description |
|---|---|---|
| cards | Yes | Four link cards arranged in a 2x2 grid. |
A responsive 2x2 grid of link cards, perfect for documentation landing pages or resource hubs. Stacks to a single column on mobile.