hero checklist carousel stacked-cards split social-proof landing-page hero checklist stacked-cards carousel split feature-list hero with feature checklist and testimonial split hero with stacked card effect
Hero Checklist Carousel
Fetch pattern JSON:
curl https://webspire.de/patterns/hero/checklist-carousel.json checklist-carousel.html
<section class="ws-hero ws-hero-checklist-carousel bg-[var(--ws-hero-bg)]">
<div class="mx-auto grid max-w-7xl gap-14 px-6 py-20 lg:grid-cols-2 lg:items-center lg:py-28">
<!-- Left: text + checklist -->
<div>
<p class="mb-4 inline-flex rounded-full bg-[var(--ws-hero-badge-bg)] px-3 py-1 text-xs font-semibold uppercase tracking-widest text-[var(--ws-hero-accent)]">Product highlights</p>
<h1 class="text-balance text-4xl font-bold tracking-tight text-[var(--ws-hero-text)] sm:text-5xl">
Everything you need to ship faster.
</h1>
<p class="mt-5 max-w-lg text-pretty text-lg text-[var(--ws-hero-text-soft)]">
Webspire gives your team a living library of production-ready UI patterns, aligned to your tokens from day one.
</p>
<ul class="mt-8 space-y-3">
<li class="flex items-start gap-3">
<span class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--ws-hero-action-bg)]">
<svg class="h-3 w-3" fill="none" stroke="white" stroke-width="3" viewBox="0 0 12 12"><path stroke-linecap="round" stroke-linejoin="round" d="M2 6l3 3 5-5"/></svg>
</span>
<span class="text-sm font-medium text-[var(--ws-hero-text)]">Copy-paste HTML patterns, Tailwind-only</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--ws-hero-action-bg)]">
<svg class="h-3 w-3" fill="none" stroke="white" stroke-width="3" viewBox="0 0 12 12"><path stroke-linecap="round" stroke-linejoin="round" d="M2 6l3 3 5-5"/></svg>
</span>
<span class="text-sm font-medium text-[var(--ws-hero-text)]">Full dark mode and SSR-safe by default</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--ws-hero-action-bg)]">
<svg class="h-3 w-3" fill="none" stroke="white" stroke-width="3" viewBox="0 0 12 12"><path stroke-linecap="round" stroke-linejoin="round" d="M2 6l3 3 5-5"/></svg>
</span>
<span class="text-sm font-medium text-[var(--ws-hero-text)]">Token-aligned design system integration</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--ws-hero-action-bg)]">
<svg class="h-3 w-3" fill="none" stroke="white" stroke-width="3" viewBox="0 0 12 12"><path stroke-linecap="round" stroke-linejoin="round" d="M2 6l3 3 5-5"/></svg>
</span>
<span class="text-sm font-medium text-[var(--ws-hero-text)]">MCP-powered AI composition tools</span>
</li>
</ul>
<a href="#" class="mt-8 inline-flex rounded-xl bg-[var(--ws-hero-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-hero-action-text)] transition hover:bg-[var(--ws-hero-action-bg-hover)]">Start building</a>
</div>
<!-- Right: stacked card carousel -->
<div class="flex flex-col items-center gap-6">
<!-- Card stack -->
<div class="relative w-full max-w-md pt-8">
<!-- Back card (furthest) -->
<div class="absolute inset-x-6 top-0 rounded-2xl border border-[var(--ws-hero-border)] bg-[var(--ws-hero-preview-bg)] opacity-50 shadow-sm" style="transform: rotate(-3deg);">
<div class="aspect-video w-full rounded-t-2xl" style="background: linear-gradient(135deg, #c084fc, #818cf8);"> <!-- ws-ok: decorative card image gradient --></div>
<div class="p-4"><div class="h-2.5 w-3/4 rounded-full bg-[var(--ws-hero-border)]"></div><div class="mt-2 h-2 w-1/2 rounded-full bg-[var(--ws-hero-badge-bg)]"></div></div>
</div>
<!-- Middle card -->
<div class="absolute inset-x-3 top-2 rounded-2xl border border-[var(--ws-hero-border)] bg-[var(--ws-hero-preview-bg)] opacity-75 shadow-md" style="transform: rotate(2deg);">
<div class="aspect-video w-full rounded-t-2xl" style="background: linear-gradient(135deg, #67e8f9, #34d399);"> <!-- ws-ok: decorative card image gradient --></div>
<div class="p-4"><div class="h-2.5 w-3/4 rounded-full bg-[var(--ws-hero-border)]"></div><div class="mt-2 h-2 w-1/2 rounded-full bg-[var(--ws-hero-badge-bg)]"></div></div>
</div>
<!-- Front card (active) -->
<div class="relative z-10 rounded-2xl border border-[var(--ws-hero-preview-border)] bg-[var(--ws-hero-preview-bg)] shadow-xl">
<!-- Image area -->
<div class="aspect-video w-full overflow-hidden rounded-t-2xl" style="background: linear-gradient(135deg, var(--ws-hero-accent), #f59e0b);"> <!-- ws-ok: decorative card image gradient -->
<div class="flex h-full items-center justify-center">
<span class="text-sm font-medium text-white/70">Product screenshot</span>
</div>
</div>
<!-- Testimonial -->
<div class="p-5">
<div class="flex gap-1" aria-label="5 out of 5 stars">
<svg class="h-4 w-4" fill="#f59e0b" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4" fill="#f59e0b" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4" fill="#f59e0b" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4" fill="#f59e0b" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4" fill="#f59e0b" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<blockquote class="mt-2 text-sm leading-relaxed text-[var(--ws-hero-text-soft)]">
"Saved us weeks of groundwork. We just dropped the patterns in and customised the tokens."
</blockquote>
<p class="mt-2 text-xs font-semibold text-[var(--ws-hero-text)]">Maria K. — Head of Product, Flowify</p>
</div>
</div>
</div>
<!-- Carousel dots -->
<div class="flex gap-2" role="tablist" aria-label="Slide navigation">
<button role="tab" aria-selected="true" aria-label="Slide 1" class="h-2 w-6 rounded-full bg-[var(--ws-hero-accent)] transition-all"></button>
<button role="tab" aria-selected="false" aria-label="Slide 2" class="h-2 w-2 rounded-full bg-[var(--ws-hero-border)] transition-all"></button>
<button role="tab" aria-selected="false" aria-label="Slide 3" class="h-2 w-2 rounded-full bg-[var(--ws-hero-border)] transition-all"></button>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste Requires JS
Stable Published
herochecklistcarouselstacked-cardssplitsocial-prooflanding-page
Slots
| Name | Required | Description |
|---|---|---|
| eyebrow | No | Pre-heading badge label. |
| headline | Yes | Main value proposition. |
| body | Yes | Supporting description text. |
| checklist | Yes | Four feature bullet points with check icons. |
| cta | Yes | Primary action button. |
| cards | Yes | Stacked card carousel mockup with testimonial. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| checklistItems | string[] | [] | Array of feature checklist items. |
Two-column hero combining a benefit-driven checklist with a visually interesting stacked card composition. The CSS rotation on back cards gives a carousel depth cue without any JavaScript.