hero carousel featured customers case-study scroll enterprise hero carousel featured horizontal-scroll customers cards snap hero section with featured content carousel customers hero with scrollable cards hero with horizontal card scroller
Hero With Carousel
Fetch pattern JSON:
curl https://webspire.de/patterns/hero/with-carousel.json with-carousel.html
<section class="ws-hero bg-[var(--ws-hero-bg)] pb-0 pt-20">
<div class="mx-auto max-w-4xl px-6 text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-hero-accent)]">Customers</p>
<h1 class="mt-4 text-balance text-4xl font-bold tracking-tight text-[var(--ws-hero-text)] sm:text-5xl lg:text-6xl">Bringing customers<br>to the frontier</h1>
<p class="mx-auto mt-6 max-w-xl text-lg text-[var(--ws-hero-text-soft)]">Organizations across the world transform their operations and services with enterprise AI.</p>
<div class="mt-8 flex flex-wrap justify-center gap-3">
<a href="#" class="rounded-xl bg-[var(--ws-hero-cta-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-hero-cta-text)] transition hover:bg-[var(--ws-hero-cta-bg-hover)]">Get in touch</a>
<a href="#stories" class="rounded-xl border border-[var(--ws-hero-border)] px-6 py-3 text-sm font-semibold text-[var(--ws-hero-text)] transition hover:bg-[var(--ws-hero-border)]/10">See all stories</a>
</div>
</div>
<!-- Featured customer carousel -->
<div class="relative mt-16 overflow-hidden">
<!-- Fade edges -->
<div class="pointer-events-none absolute inset-y-0 left-0 z-10 w-24 bg-gradient-to-r from-[var(--ws-hero-bg)]"></div>
<div class="pointer-events-none absolute inset-y-0 right-0 z-10 w-24 bg-gradient-to-l from-[var(--ws-hero-bg)]"></div>
<!-- Scroll container (static — add JS for prev/next interactivity) -->
<div class="flex snap-x snap-mandatory overflow-x-auto scroll-smooth px-[max(24px,calc(50%-520px))] pb-6 gap-5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" role="list">
<!-- Featured card 1 -->
<article class="group w-72 shrink-0 snap-start overflow-hidden rounded-2xl border border-[var(--ws-hero-border)] bg-[var(--ws-hero-bg)] transition hover:shadow-xl hover:shadow-black/10" role="listitem">
<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-xl font-bold text-white/40">CMA CGM</span>
</div>
</div>
<div class="p-5">
<p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-hero-text-muted)]">Logistics</p>
<h3 class="mt-1.5 text-sm font-semibold leading-snug text-[var(--ws-hero-text)] group-hover:text-[var(--ws-hero-accent)] transition-colors">Optimizing global container shipping routes with intelligent document processing</h3>
</div>
</article>
<!-- Featured card 2 -->
<article class="group w-72 shrink-0 snap-start overflow-hidden rounded-2xl border border-[var(--ws-hero-border)] bg-[var(--ws-hero-bg)] transition hover:shadow-xl hover:shadow-black/10" role="listitem">
<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-xl font-bold text-white/40">Stellantis</span>
</div>
</div>
<div class="p-5">
<p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-hero-text-muted)]">Manufacturing</p>
<h3 class="mt-1.5 text-sm font-semibold leading-snug text-[var(--ws-hero-text)] group-hover:text-[var(--ws-hero-accent)] transition-colors">Accelerating software-defined vehicle development with AI coding assistance</h3>
</div>
</article>
<!-- Featured card 3 -->
<article class="group w-72 shrink-0 snap-start overflow-hidden rounded-2xl border border-[var(--ws-hero-border)] bg-[var(--ws-hero-bg)] transition hover:shadow-xl hover:shadow-black/10" role="listitem">
<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-xl font-bold text-white/40">ASML</span>
</div>
</div>
<div class="p-5">
<p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-hero-text-muted)]">Technology</p>
<h3 class="mt-1.5 text-sm font-semibold leading-snug text-[var(--ws-hero-text)] group-hover:text-[var(--ws-hero-accent)] transition-colors">Deploying domain-specific models for semiconductor lithography R&D</h3>
</div>
</article>
<!-- Featured card 4 -->
<article class="group w-72 shrink-0 snap-start overflow-hidden rounded-2xl border border-[var(--ws-hero-border)] bg-[var(--ws-hero-bg)] transition hover:shadow-xl hover:shadow-black/10" role="listitem">
<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-xl font-bold text-white/40">Cisco</span>
</div>
</div>
<div class="p-5">
<p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-hero-text-muted)]">Technology</p>
<h3 class="mt-1.5 text-sm font-semibold leading-snug text-[var(--ws-hero-text)] group-hover:text-[var(--ws-hero-accent)] transition-colors">Reducing proposal time by 20%+ with AI-assisted enterprise sales workflows</h3>
</div>
</article>
<!-- Featured card 5 -->
<article class="group w-72 shrink-0 snap-start overflow-hidden rounded-2xl border border-[var(--ws-hero-border)] bg-[var(--ws-hero-bg)] transition hover:shadow-xl hover:shadow-black/10" role="listitem">
<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-xl font-bold text-white/40">BNP Paribas</span>
</div>
</div>
<div class="p-5">
<p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-hero-text-muted)]">Financial services</p>
<h3 class="mt-1.5 text-sm font-semibold leading-snug text-[var(--ws-hero-text)] group-hover:text-[var(--ws-hero-accent)] transition-colors">Sovereign AI deployment for compliance-critical banking operations</h3>
</div>
</article>
</div>
<!-- Navigation arrows -->
<div class="pointer-events-none absolute inset-y-0 left-0 z-20 flex items-center pl-4">
<button class="pointer-events-auto flex h-9 w-9 items-center justify-center rounded-full border border-[var(--ws-hero-border)] bg-[var(--ws-hero-bg)]/90 text-[var(--ws-hero-text)] shadow-sm backdrop-blur-sm transition hover:bg-[var(--ws-hero-border)]/20" aria-label="Previous slide">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
</button>
</div>
<div class="pointer-events-none absolute inset-y-0 right-0 z-20 flex items-center pr-4">
<button class="pointer-events-auto flex h-9 w-9 items-center justify-center rounded-full border border-[var(--ws-hero-border)] bg-[var(--ws-hero-bg)]/90 text-[var(--ws-hero-text)] shadow-sm backdrop-blur-sm transition hover:bg-[var(--ws-hero-border)]/20" aria-label="Next slide">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg>
</button>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
herocarouselfeaturedcustomerscase-studyscrollenterprise
Slots
| Name | Required | Description |
|---|---|---|
| eyebrow | No | Small label above the heading. |
| heading | Yes | Main hero headline. |
| subtext | No | Supporting paragraph. |
| cta | Yes | Primary and secondary action buttons. |
| carousel | Yes | Horizontally scrollable featured cards with cover image, category, and headline. |
Centered hero with text and CTAs, followed immediately by a horizontally scrollable card strip. Cards use snap-x mandatory for scroll snapping. Left/right gradient fades (matching the hero background) give depth and hint at more content. Prev/next arrow buttons with backdrop-blur float over the edges. Replace gradient covers with real images. Wire up scrollBy() on the arrow buttons for production.