cards solution color-coded solid-bg three-column platform capabilities solution color-coded cards solid-background three-column platform capabilities pillars solution cards with distinct background colors platform capabilities three column with colored cards product overview cards with solid color backgrounds
Cards Solution Color Coded
Fetch pattern JSON:
curl https://webspire.de/patterns/cards/solution-color-coded.json solution-color-coded.html
<section class="ws-cards bg-[var(--ws-cards-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-cards-accent)]">One platform</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-cards-text)] sm:text-4xl">Three capabilities, unified</h2>
<p class="mt-4 text-base leading-relaxed text-[var(--ws-cards-text-soft)]">Stop stitching together point solutions. Every capability is built on the same data layer.</p>
</div>
<div class="mt-16 grid gap-6 sm:grid-cols-3">
<!-- Card 1: Dark navy -->
<div class="group flex flex-col rounded-3xl bg-slate-900 p-8 text-white"><!-- ws-ok -->
<div class="mb-6 flex h-12 w-12 items-center justify-center rounded-2xl bg-white/10">
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 15.803a7.5 7.5 0 0010.607 10.607z"/></svg>
</div>
<h3 class="text-xl font-bold text-white">Data Discovery & Classification</h3>
<p class="mt-3 flex-1 text-sm leading-relaxed text-white/60">Find and classify sensitive data across every cloud, app, and endpoint — automatically, continuously, accurately.</p>
<a href="#" class="mt-6 inline-flex items-center gap-1.5 text-sm font-semibold text-white/80 hover:text-white transition-colors">
Learn more
<svg class="h-4 w-4 transition-transform group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
</a>
</div>
<!-- Card 2: Amber -->
<div class="group flex flex-col rounded-3xl bg-amber-400 p-8">
<div class="mb-6 flex h-12 w-12 items-center justify-center rounded-2xl bg-amber-900/20">
<svg class="h-6 w-6 text-amber-950" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
</div>
<h3 class="text-xl font-bold text-amber-950">Detection & Response</h3>
<p class="mt-3 flex-1 text-sm leading-relaxed text-amber-900">Monitor data movement in real time. Surface risky behavior, unusual access patterns, and active leak attempts before they escalate.</p>
<a href="#" class="mt-6 inline-flex items-center gap-1.5 text-sm font-semibold text-amber-900 hover:text-amber-950 transition-colors">
Learn more
<svg class="h-4 w-4 transition-transform group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
</a>
</div>
<!-- Card 3: Light gray -->
<div class="group flex flex-col rounded-3xl bg-[var(--ws-cards-bg)] border border-[var(--ws-cards-border)] p-8">
<div class="mb-6 flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--ws-cards-bg)]">
<svg class="h-6 w-6 text-[var(--ws-cards-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.25-8.25-3.286zm0 13.036h.008v.008H12v-.008z"/></svg>
</div>
<h3 class="text-xl font-bold text-[var(--ws-cards-text)]">Loss Prevention & Mitigation</h3>
<p class="mt-3 flex-1 text-sm leading-relaxed text-[var(--ws-cards-text-soft)]">Enforce policies in real time. Block, quarantine, or notify — with enough context to avoid disrupting legitimate work.</p>
<a href="#" class="mt-6 inline-flex items-center gap-1.5 text-sm font-semibold text-[var(--ws-cards-accent)] hover:underline transition-colors">
Learn more
<svg class="h-4 w-4 transition-transform group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
</a>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
cardssolutioncolor-codedsolid-bgthree-columnplatformcapabilities
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Optional kicker, title, and subtitle above the cards. |
| cards | Yes | Three cards with distinct solid background, icon, title, description, and arrow link. |
Three solution cards each with a distinct solid background (dark navy / amber / neutral). Different from cards/colored which uses dark gradient backgrounds — these use bold, saturated solid fills to make each solution immediately distinguishable. The arrow link uses group-hover:translate-x-0.5 for a subtle directional hint on hover.