link-card colorful hover dot-grid developer quicklinks navigation link-card colorful hover dot-grid quicklinks developer navigation docs colorful quicklink cards navigation card grid with hover colors docs landing quicklinks colored icon cards with hover effect
Link Card Colorful
Fetch pattern JSON:
curl https://webspire.de/patterns/link-card/colorful.json colorful.html
<div class="ws-link-card bg-[var(--ws-link-card-bg)] py-10">
<div class="mx-auto max-w-7xl px-6">
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
<!-- Card: Getting Started -->
<a href="#"
class="group relative flex flex-col items-center overflow-hidden rounded-xl border border-[var(--ws-link-card-border)] bg-[var(--ws-link-card-bg)] p-6 text-center transition hover:border-[color:var(--lc-hover)] hover:bg-[color-mix(in_oklch,var(--ws-link-card-bg),var(--lc-hover)_6%)]"
style="--lc-hover: oklch(0.65 0.22 264);">
<!-- Dot grid overlay on hover -->
<div class="pointer-events-none absolute inset-0 opacity-0 transition-opacity group-hover:opacity-20"
style="background-image: radial-gradient(circle, var(--lc-hover) 1px, transparent 1px); background-size: 10px 10px;"></div>
<span class="relative inline-flex h-12 w-12 items-center justify-center rounded-xl bg-[var(--ws-link-card-bg)] ring-1 ring-[var(--ws-link-card-border)] transition group-hover:bg-[color-mix(in_oklch,var(--ws-link-card-bg),var(--lc-hover)_12%)] group-hover:ring-[color:var(--lc-hover)]">
<svg class="h-5 w-5 text-[var(--ws-link-card-text-soft)] transition group-hover:text-[color:var(--lc-hover)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
</span>
<h3 class="relative mt-4 text-sm font-semibold text-[var(--ws-link-card-text)]">Getting Started</h3>
<p class="relative mt-1 text-xs text-[var(--ws-link-card-text-soft)]">Set up your first project in minutes</p>
</a>
<!-- Card: API Reference -->
<a href="#"
class="group relative flex flex-col items-center overflow-hidden rounded-xl border border-[var(--ws-link-card-border)] bg-[var(--ws-link-card-bg)] p-6 text-center transition hover:border-[color:var(--lc-hover)] hover:bg-[color-mix(in_oklch,var(--ws-link-card-bg),var(--lc-hover)_6%)]"
style="--lc-hover: oklch(0.65 0.22 340);">
<div class="pointer-events-none absolute inset-0 opacity-0 transition-opacity group-hover:opacity-20"
style="background-image: radial-gradient(circle, var(--lc-hover) 1px, transparent 1px); background-size: 10px 10px;"></div>
<span class="relative inline-flex h-12 w-12 items-center justify-center rounded-xl bg-[var(--ws-link-card-bg)] ring-1 ring-[var(--ws-link-card-border)] transition group-hover:bg-[color-mix(in_oklch,var(--ws-link-card-bg),var(--lc-hover)_12%)] group-hover:ring-[color:var(--lc-hover)]">
<svg class="h-5 w-5 text-[var(--ws-link-card-text-soft)] transition group-hover:text-[color:var(--lc-hover)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"/></svg>
</span>
<h3 class="relative mt-4 text-sm font-semibold text-[var(--ws-link-card-text)]">API Reference</h3>
<p class="relative mt-1 text-xs text-[var(--ws-link-card-text-soft)]">Explore endpoints, params, and examples</p>
</a>
<!-- Card: Guides -->
<a href="#"
class="group relative flex flex-col items-center overflow-hidden rounded-xl border border-[var(--ws-link-card-border)] bg-[var(--ws-link-card-bg)] p-6 text-center transition hover:border-[color:var(--lc-hover)] hover:bg-[color-mix(in_oklch,var(--ws-link-card-bg),var(--lc-hover)_6%)]"
style="--lc-hover: oklch(0.72 0.18 80);">
<div class="pointer-events-none absolute inset-0 opacity-0 transition-opacity group-hover:opacity-20"
style="background-image: radial-gradient(circle, var(--lc-hover) 1px, transparent 1px); background-size: 10px 10px;"></div>
<span class="relative inline-flex h-12 w-12 items-center justify-center rounded-xl bg-[var(--ws-link-card-bg)] ring-1 ring-[var(--ws-link-card-border)] transition group-hover:bg-[color-mix(in_oklch,var(--ws-link-card-bg),var(--lc-hover)_12%)] group-hover:ring-[color:var(--lc-hover)]">
<svg class="h-5 w-5 text-[var(--ws-link-card-text-soft)] transition group-hover:text-[color:var(--lc-hover)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"/></svg>
</span>
<h3 class="relative mt-4 text-sm font-semibold text-[var(--ws-link-card-text)]">Guides</h3>
<p class="relative mt-1 text-xs text-[var(--ws-link-card-text-soft)]">Step-by-step tutorials and cookbooks</p>
</a>
<!-- Card: Changelog -->
<a href="#"
class="group relative flex flex-col items-center overflow-hidden rounded-xl border border-[var(--ws-link-card-border)] bg-[var(--ws-link-card-bg)] p-6 text-center transition hover:border-[color:var(--lc-hover)] hover:bg-[color-mix(in_oklch,var(--ws-link-card-bg),var(--lc-hover)_6%)]"
style="--lc-hover: oklch(0.7 0.17 162);">
<div class="pointer-events-none absolute inset-0 opacity-0 transition-opacity group-hover:opacity-20"
style="background-image: radial-gradient(circle, var(--lc-hover) 1px, transparent 1px); background-size: 10px 10px;"></div>
<span class="relative inline-flex h-12 w-12 items-center justify-center rounded-xl bg-[var(--ws-link-card-bg)] ring-1 ring-[var(--ws-link-card-border)] transition group-hover:bg-[color-mix(in_oklch,var(--ws-link-card-bg),var(--lc-hover)_12%)] group-hover:ring-[color:var(--lc-hover)]">
<svg class="h-5 w-5 text-[var(--ws-link-card-text-soft)] transition group-hover:text-[color:var(--lc-hover)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"/></svg>
</span>
<h3 class="relative mt-4 text-sm font-semibold text-[var(--ws-link-card-text)]">Changelog</h3>
<p class="relative mt-1 text-xs text-[var(--ws-link-card-text-soft)]">Latest updates, new models, and releases</p>
</a>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
link-cardcolorfulhoverdot-griddeveloperquicklinksnavigation
Slots
| Name | Required | Description |
|---|---|---|
| cards | Yes | Link cards with icon, title, description, and individual accent color. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| --lc-hover | color | oklch(0.65 0.22 264) | Per-card accent color used for border, icon ring, background tint, and dot-grid overlay on hover. Set inline on each card element. |
Four-column quicklink card grid where each card has its own accent color via --lc-hover. On hover:
- Border adopts the card’s color
- Icon ring gets a subtle color tint
- A dot-grid (
radial-gradient) overlay fades in - Background gets a very subtle color wash via
color-mix()
All CSS — no JavaScript. Inspired by developer documentation landing pages. Set --lc-hover to any OKLCH/hex color on each card <a> element.