cards accent glow glass feature icon per-card custom-property cards accent glow icon feature custom-property per-card feature cards with individual accent colors card grid with per-card color variable icon card with glow effect
Cards Glass Accent
Fetch pattern JSON:
curl https://webspire.de/patterns/cards/glass-accent.json glass-accent.html
<section class="ws-cards bg-[var(--ws-cards-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mb-12 text-center">
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-cards-text)] sm:text-4xl">Feature Highlights</h2>
<p class="mx-auto mt-4 max-w-xl text-lg text-[var(--ws-cards-text-soft)]">
Each card carries its own accent — override <code class="rounded bg-[var(--ws-cards-border)] px-1.5 py-0.5 text-sm font-mono">--card-accent</code> to adapt.
</p>
</div>
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
<!-- Card 1: violet accent -->
<article
class="group relative overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-6 transition hover:shadow-lg"
style="--card-accent: oklch(55% 0.2 280);"
>
<!-- Subtle accent glow top-right -->
<div class="pointer-events-none absolute -right-10 -top-10 h-40 w-40 rounded-full bg-[var(--card-accent)] opacity-[0.08] blur-3xl transition group-hover:opacity-[0.14]" aria-hidden="true"></div>
<!-- Icon badge -->
<div class="mb-4 inline-flex h-11 w-11 items-center justify-center rounded-xl" style="background: color-mix(in oklch, var(--card-accent) 12%, transparent);">
<svg class="h-5 w-5" style="color: var(--card-accent);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M11.983 1.907a.75.75 0 00-1.292-.657l-8.5 9.5A.75.75 0 002.75 12h6.572l-1.305 6.093a.75.75 0 001.292.657l8.5-9.5A.75.75 0 0017.25 8h-6.572l1.305-6.093z" clip-rule="evenodd"/>
</svg>
</div>
<h3 class="text-base font-semibold text-[var(--ws-cards-text)]">Instant Deploy</h3>
<p class="mt-2 text-sm text-[var(--ws-cards-text-soft)]">Push and go live in under 30 seconds. Zero configuration, automatic rollbacks.</p>
<a href="#" class="mt-4 inline-flex items-center gap-1 text-sm font-medium" style="color: var(--card-accent);">
Learn more
<svg class="h-3.5 w-3.5" 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 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd"/>
</svg>
</a>
</article>
<!-- Card 2: teal accent -->
<article
class="group relative overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-6 transition hover:shadow-lg"
style="--card-accent: oklch(55% 0.18 185);"
>
<div class="pointer-events-none absolute -right-10 -top-10 h-40 w-40 rounded-full bg-[var(--card-accent)] opacity-[0.08] blur-3xl transition group-hover:opacity-[0.14]" aria-hidden="true"></div>
<div class="mb-4 inline-flex h-11 w-11 items-center justify-center rounded-xl" style="background: color-mix(in oklch, var(--card-accent) 12%, transparent);">
<svg class="h-5 w-5" style="color: var(--card-accent);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd"/>
</svg>
</div>
<h3 class="text-base font-semibold text-[var(--ws-cards-text)]">End-to-End Encryption</h3>
<p class="mt-2 text-sm text-[var(--ws-cards-text-soft)]">Every request encrypted at rest and in transit. SOC 2 Type II certified.</p>
<a href="#" class="mt-4 inline-flex items-center gap-1 text-sm font-medium" style="color: var(--card-accent);">
Learn more
<svg class="h-3.5 w-3.5" 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 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd"/>
</svg>
</a>
</article>
<!-- Card 3: amber accent -->
<article
class="group relative overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-6 transition hover:shadow-lg"
style="--card-accent: oklch(62% 0.18 75);"
>
<div class="pointer-events-none absolute -right-10 -top-10 h-40 w-40 rounded-full bg-[var(--card-accent)] opacity-[0.08] blur-3xl transition group-hover:opacity-[0.14]" aria-hidden="true"></div>
<div class="mb-4 inline-flex h-11 w-11 items-center justify-center rounded-xl" style="background: color-mix(in oklch, var(--card-accent) 12%, transparent);">
<svg class="h-5 w-5" style="color: var(--card-accent);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M15.98 1.804a1 1 0 00-1.96 0l-.24 1.192a1 1 0 01-.784.785l-1.192.238a1 1 0 000 1.962l1.192.238a1 1 0 01.785.785l.238 1.192a1 1 0 001.962 0l.238-1.192a1 1 0 01.785-.785l1.192-.238a1 1 0 000-1.962l-1.192-.238a1 1 0 01-.785-.785l-.238-1.192zM6.949 5.684a1 1 0 00-1.898 0l-.683 2.051a1 1 0 01-.633.633l-2.051.683a1 1 0 000 1.898l2.051.684a1 1 0 01.633.632l.683 2.051a1 1 0 001.898 0l.683-2.051a1 1 0 01.633-.633l2.051-.683a1 1 0 000-1.897l-2.051-.684a1 1 0 01-.633-.633L6.95 5.684z"/>
</svg>
</div>
<h3 class="text-base font-semibold text-[var(--ws-cards-text)]">AI-Powered Insights</h3>
<p class="mt-2 text-sm text-[var(--ws-cards-text-soft)]">Automatic anomaly detection, predictive scaling, and usage recommendations.</p>
<a href="#" class="mt-4 inline-flex items-center gap-1 text-sm font-medium" style="color: var(--card-accent);">
Learn more
<svg class="h-3.5 w-3.5" 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 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd"/>
</svg>
</a>
</article>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
cardsaccentglowglassfeatureiconper-cardcustom-property
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and optional description. |
| cards | Yes | Feature cards — each with icon, title, body, and learn-more link. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| --card-accent | color | (per card) | Per-card accent color driving icon, glow, badge, and link color. |
The key technique: each <article> sets style="--card-accent: oklch(...);". Everything inside — the icon badge background (color-mix), the icon color, the ambient glow blob, and the “learn more” link — all consume var(--card-accent). Changing one inline variable recolors the entire card.
Adding a new card
<article
class="group relative overflow-hidden rounded-2xl border p-6 ..."
style="--card-accent: oklch(55% 0.2 320);">
<!-- glow, icon badge, title, body, link — all use var(--card-accent) -->
</article>Overriding accent from outside
<!-- From a parent container or design token -->
<div style="--card-accent: var(--brand-color);">
<article class="...">...</article>
</div>