case-study customers filter grid industry enterprise stories case-study customers filter industry grid stories enterprise success filterable customer stories grid case study page with industry filter customer success stories by category
Case Study Filtered Grid
Fetch pattern JSON:
curl https://webspire.de/patterns/case-study/filtered-grid.json filtered-grid.html
<section class="ws-case-study bg-[var(--ws-case-study-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<!-- Section heading -->
<div class="text-center">
<h2 class="text-balance text-3xl font-bold tracking-tight text-[var(--ws-case-study-text)] sm:text-4xl">Bringing customers to the frontier</h2>
<p class="mx-auto mt-4 max-w-xl text-base text-[var(--ws-case-study-text-soft)]">Explore how organizations around the world transform their operations with AI.</p>
</div>
<!-- Filter chips -->
<div class="mt-10 flex flex-wrap justify-center gap-2" role="group" aria-label="Filter by industry">
<button class="rounded-full border border-[var(--ws-case-study-accent)] bg-[var(--ws-case-study-accent)]/10 px-4 py-1.5 text-sm font-medium text-[var(--ws-case-study-accent)] transition" aria-pressed="true">All</button>
<button class="rounded-full border border-[var(--ws-case-study-border)] px-4 py-1.5 text-sm font-medium text-[var(--ws-case-study-text-soft)] transition hover:border-[var(--ws-case-study-accent)] hover:text-[var(--ws-case-study-accent)]" aria-pressed="false">Financial services</button>
<button class="rounded-full border border-[var(--ws-case-study-border)] px-4 py-1.5 text-sm font-medium text-[var(--ws-case-study-text-soft)] transition hover:border-[var(--ws-case-study-accent)] hover:text-[var(--ws-case-study-accent)]" aria-pressed="false">Technology</button>
<button class="rounded-full border border-[var(--ws-case-study-border)] px-4 py-1.5 text-sm font-medium text-[var(--ws-case-study-text-soft)] transition hover:border-[var(--ws-case-study-accent)] hover:text-[var(--ws-case-study-accent)]" aria-pressed="false">Manufacturing</button>
<button class="rounded-full border border-[var(--ws-case-study-border)] px-4 py-1.5 text-sm font-medium text-[var(--ws-case-study-text-soft)] transition hover:border-[var(--ws-case-study-accent)] hover:text-[var(--ws-case-study-accent)]" aria-pressed="false">Logistics</button>
<button class="rounded-full border border-[var(--ws-case-study-border)] px-4 py-1.5 text-sm font-medium text-[var(--ws-case-study-text-soft)] transition hover:border-[var(--ws-case-study-accent)] hover:text-[var(--ws-case-study-accent)]" aria-pressed="false">Healthcare</button>
<button class="rounded-full border border-[var(--ws-case-study-border)] px-4 py-1.5 text-sm font-medium text-[var(--ws-case-study-text-soft)] transition hover:border-[var(--ws-case-study-accent)] hover:text-[var(--ws-case-study-accent)]" aria-pressed="false">Public sector</button>
<button class="rounded-full border border-[var(--ws-case-study-border)] px-4 py-1.5 text-sm font-medium text-[var(--ws-case-study-text-soft)] transition hover:border-[var(--ws-case-study-accent)] hover:text-[var(--ws-case-study-accent)]" aria-pressed="false">Energy</button>
</div>
<!-- Customer grid -->
<div class="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<!-- Card -->
<a href="#" class="group flex flex-col overflow-hidden rounded-xl border border-[var(--ws-case-study-border)] bg-[var(--ws-case-study-card-bg)] transition hover:shadow-lg hover:shadow-black/5">
<div class="aspect-video overflow-hidden bg-gradient-to-br from-slate-700 to-slate-900">
<div class="flex h-full items-center justify-center">
<span class="text-2xl font-bold text-white/30">Stellantis</span>
</div>
</div>
<div class="flex flex-1 flex-col p-5">
<p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-case-study-text-muted)]">Manufacturing</p>
<h3 class="mt-1.5 text-sm font-semibold leading-snug text-[var(--ws-case-study-text)] group-hover:text-[var(--ws-case-study-accent)] transition-colors">Accelerating software-defined vehicle development with AI coding assistance</h3>
</div>
</a>
<a href="#" class="group flex flex-col overflow-hidden rounded-xl border border-[var(--ws-case-study-border)] bg-[var(--ws-case-study-card-bg)] transition hover:shadow-lg hover:shadow-black/5">
<div class="aspect-video overflow-hidden bg-gradient-to-br from-blue-800 to-indigo-900">
<div class="flex h-full items-center justify-center">
<span class="text-2xl font-bold text-white/30">ASML</span>
</div>
</div>
<div class="flex flex-1 flex-col p-5">
<p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-case-study-text-muted)]">Technology</p>
<h3 class="mt-1.5 text-sm font-semibold leading-snug text-[var(--ws-case-study-text)] group-hover:text-[var(--ws-case-study-accent)] transition-colors">Deploying domain-specific models for semiconductor lithography R&D</h3>
</div>
</a>
<a href="#" class="group flex flex-col overflow-hidden rounded-xl border border-[var(--ws-case-study-border)] bg-[var(--ws-case-study-card-bg)] transition hover:shadow-lg hover:shadow-black/5">
<div class="aspect-video overflow-hidden bg-gradient-to-br from-emerald-700 to-teal-900">
<div class="flex h-full items-center justify-center">
<span class="text-2xl font-bold text-white/30">CMA CGM</span>
</div>
</div>
<div class="flex flex-1 flex-col p-5">
<p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-case-study-text-muted)]">Logistics</p>
<h3 class="mt-1.5 text-sm font-semibold leading-snug text-[var(--ws-case-study-text)] group-hover:text-[var(--ws-case-study-accent)] transition-colors">Optimizing global container shipping routes with intelligent document processing</h3>
</div>
</a>
<a href="#" class="group flex flex-col overflow-hidden rounded-xl border border-[var(--ws-case-study-border)] bg-[var(--ws-case-study-card-bg)] transition hover:shadow-lg hover:shadow-black/5">
<div class="aspect-video overflow-hidden bg-gradient-to-br from-orange-700 to-red-800">
<div class="flex h-full items-center justify-center">
<span class="text-2xl font-bold text-white/30">Cisco</span>
</div>
</div>
<div class="flex flex-1 flex-col p-5">
<p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-case-study-text-muted)]">Technology</p>
<h3 class="mt-1.5 text-sm font-semibold leading-snug text-[var(--ws-case-study-text)] group-hover:text-[var(--ws-case-study-accent)] transition-colors">Reducing proposal time by 20%+ with AI-assisted enterprise sales workflows</h3>
</div>
</a>
<a href="#" class="group flex flex-col overflow-hidden rounded-xl border border-[var(--ws-case-study-border)] bg-[var(--ws-case-study-card-bg)] transition hover:shadow-lg hover:shadow-black/5">
<div class="aspect-video overflow-hidden bg-gradient-to-br from-sky-700 to-blue-900">
<div class="flex h-full items-center justify-center">
<span class="text-2xl font-bold text-white/30">BNP Paribas</span>
</div>
</div>
<div class="flex flex-1 flex-col p-5">
<p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-case-study-text-muted)]">Financial services</p>
<h3 class="mt-1.5 text-sm font-semibold leading-snug text-[var(--ws-case-study-text)] group-hover:text-[var(--ws-case-study-accent)] transition-colors">Sovereign AI deployment for compliance-critical banking document analysis</h3>
</div>
</a>
<a href="#" class="group flex flex-col overflow-hidden rounded-xl border border-[var(--ws-case-study-border)] bg-[var(--ws-case-study-card-bg)] transition hover:shadow-lg hover:shadow-black/5">
<div class="aspect-video overflow-hidden bg-gradient-to-br from-purple-700 to-violet-900">
<div class="flex h-full items-center justify-center">
<span class="text-2xl font-bold text-white/30">Capgemini</span>
</div>
</div>
<div class="flex flex-1 flex-col p-5">
<p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-case-study-text-muted)]">Technology</p>
<h3 class="mt-1.5 text-sm font-semibold leading-snug text-[var(--ws-case-study-text)] group-hover:text-[var(--ws-case-study-accent)] transition-colors">90% accuracy in code completion for 340,000-developer global workforce</h3>
</div>
</a>
<a href="#" class="group flex flex-col overflow-hidden rounded-xl border border-[var(--ws-case-study-border)] bg-[var(--ws-case-study-card-bg)] transition hover:shadow-lg hover:shadow-black/5">
<div class="aspect-video overflow-hidden bg-gradient-to-br from-rose-700 to-pink-900">
<div class="flex h-full items-center justify-center">
<span class="text-2xl font-bold text-white/30">SAP</span>
</div>
</div>
<div class="flex flex-1 flex-col p-5">
<p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-case-study-text-muted)]">Technology</p>
<h3 class="mt-1.5 text-sm font-semibold leading-snug text-[var(--ws-case-study-text)] group-hover:text-[var(--ws-case-study-accent)] transition-colors">Integrating frontier AI into enterprise ERP workflows across 400,000+ customers</h3>
</div>
</a>
<a href="#" class="group flex flex-col overflow-hidden rounded-xl border border-[var(--ws-case-study-border)] bg-[var(--ws-case-study-card-bg)] transition hover:shadow-lg hover:shadow-black/5">
<div class="aspect-video overflow-hidden bg-gradient-to-br from-amber-600 to-orange-800">
<div class="flex h-full items-center justify-center">
<span class="text-2xl font-bold text-white/30">Orange</span>
</div>
</div>
<div class="flex flex-1 flex-col p-5">
<p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-case-study-text-muted)]">Technology</p>
<h3 class="mt-1.5 text-sm font-semibold leading-snug text-[var(--ws-case-study-text)] group-hover:text-[var(--ws-case-study-accent)] transition-colors">Private on-premise deployment for Europe's largest telecommunications operator</h3>
</div>
</a>
</div>
<!-- Load more -->
<div class="mt-10 text-center">
<button class="rounded-xl border border-[var(--ws-case-study-border)] px-6 py-2.5 text-sm font-medium text-[var(--ws-case-study-text-soft)] transition hover:border-[var(--ws-case-study-accent)] hover:text-[var(--ws-case-study-accent)]">Load more stories</button>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
case-studycustomersfiltergridindustryenterprisestories
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle. |
| filters | Yes | Industry filter chips — All + named verticals. |
| grid | Yes | Customer cards with cover image, industry label, and headline. |
| load-more | No | Load more button at the bottom. |
Full customer/case study grid with horizontal filter chip bar (“Filter by Industry”). Cards are compact: aspect-video cover image + category label + headline. Hover turns headline to accent color. Cards link to individual story pages. Responsive 4→3→2→1 column grid. Load-more button at bottom for pagination. Filter chips use aria-pressed — active chip gets filled accent style.