cards actions buttons cta grid cards actions buttons cta grid badge hover card with action buttons card grid with primary and secondary buttons
Action Cards
Fetch pattern JSON:
curl https://webspire.de/patterns/cards/action.json action.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">Take action</h2>
<p class="mx-auto mt-4 max-w-xl text-lg text-[var(--ws-cards-text-soft)]">Explore our offerings and get started with the right plan for you.</p>
</div>
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
<article class="group relative flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] transition duration-300 hover:-translate-y-1 hover:shadow-xl">
<div class="relative aspect-[4/3] bg-gradient-to-br from-indigo-100 to-violet-100">
<span class="absolute right-3 top-3 rounded-full bg-indigo-600 px-2.5 py-0.5 text-xs font-semibold text-white shadow-sm">New</span>
</div>
<div class="flex flex-1 flex-col p-6">
<h3 class="text-lg font-semibold text-[var(--ws-cards-text)] group-hover:text-[var(--ws-cards-accent)]">Quick Start</h3>
<p class="mt-2 flex-1 text-sm text-[var(--ws-cards-text-soft)]">Get up and running in minutes with our beginner-friendly starter template.</p>
<div class="mt-6 flex items-center gap-3">
<a href="#" class="inline-flex flex-1 items-center justify-center rounded-lg bg-[var(--ws-cards-accent)] px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Get started</a>
<a href="#" class="inline-flex flex-1 items-center justify-center rounded-lg border border-[var(--ws-cards-border)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-cards-text)] transition hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Details</a>
</div>
</div>
</article>
<article class="group relative flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] transition duration-300 hover:-translate-y-1 hover:shadow-xl">
<div class="relative aspect-[4/3] bg-gradient-to-br from-emerald-100 to-teal-100">
<span class="absolute right-3 top-3 rounded-full bg-emerald-600 px-2.5 py-0.5 text-xs font-semibold text-white shadow-sm">Popular</span>
</div>
<div class="flex flex-1 flex-col p-6">
<h3 class="text-lg font-semibold text-[var(--ws-cards-text)] group-hover:text-[var(--ws-cards-accent)]">Pro Toolkit</h3>
<p class="mt-2 flex-1 text-sm text-[var(--ws-cards-text-soft)]">Advanced components and integrations for teams building production applications.</p>
<div class="mt-6 flex items-center gap-3">
<a href="#" class="inline-flex flex-1 items-center justify-center rounded-lg bg-[var(--ws-cards-accent)] px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Get started</a>
<a href="#" class="inline-flex flex-1 items-center justify-center rounded-lg border border-[var(--ws-cards-border)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-cards-text)] transition hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Details</a>
</div>
</div>
</article>
<article class="group relative flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] transition duration-300 hover:-translate-y-1 hover:shadow-xl">
<div class="relative aspect-[4/3] bg-gradient-to-br from-amber-100 to-orange-100">
<span class="absolute right-3 top-3 rounded-full bg-amber-600 px-2.5 py-0.5 text-xs font-semibold text-white shadow-sm">Limited</span>
</div>
<div class="flex flex-1 flex-col p-6">
<h3 class="text-lg font-semibold text-[var(--ws-cards-text)] group-hover:text-[var(--ws-cards-accent)]">Enterprise Suite</h3>
<p class="mt-2 flex-1 text-sm text-[var(--ws-cards-text-soft)]">Full platform access with custom branding, SSO, and dedicated account management.</p>
<div class="mt-6 flex items-center gap-3">
<a href="#" class="inline-flex flex-1 items-center justify-center rounded-lg bg-[var(--ws-cards-accent)] px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Get started</a>
<a href="#" class="inline-flex flex-1 items-center justify-center rounded-lg border border-[var(--ws-cards-border)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-cards-text)] transition hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Details</a>
</div>
</div>
</article>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
cardsactionsbuttonsctagrid
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle. |
| cards | Yes | Cards with image, badge, title, description, and action buttons. |
Three-column responsive card grid with prominent action buttons. Each card features a gradient image placeholder (replace with <img>), corner badge, title, description, and a dual-button footer with primary and secondary/outline actions. Cards lift with shadow on hover. Full dark mode support.