cards sticky scroll steps how-it-works numbered layout cards sticky scroll steps numbered how-it-works process layout sticky left column scrolling cards how it works step cards
Sticky Scroll Stack
Fetch pattern JSON:
curl https://webspire.de/patterns/cards/sticky-scroll-stack.json sticky-scroll-stack.html
<section class="ws-cards-sticky-scroll-stack bg-[var(--ws-color-bg)] py-20">
<div class="mx-auto max-w-6xl px-6">
<div class="grid min-h-[800px] grid-cols-1 items-start gap-16 lg:grid-cols-2">
<!-- Left: Sticky panel -->
<div class="lg:sticky lg:top-24">
<p class="text-sm font-semibold uppercase tracking-wider text-[var(--ws-color-accent)]">How it works</p>
<h2 class="mt-3 text-3xl font-bold tracking-tight text-[var(--ws-color-text)] sm:text-4xl">From idea to production in four steps</h2>
<p class="mt-5 text-base leading-relaxed text-[var(--ws-color-text-soft)]">
Our streamlined process removes the friction from design to deployment — so your team ships faster without cutting corners.
</p>
<!-- Step tracker -->
<div class="mt-10 flex flex-col gap-0">
<div class="flex items-start gap-4">
<div class="flex flex-col items-center">
<div class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-[var(--ws-color-accent)] text-xs font-bold text-white">1</div>
<div class="mt-1 h-10 w-px bg-[var(--ws-color-border)]"></div>
</div>
<p class="pt-1 text-sm font-medium text-[var(--ws-color-text)]">Discovery & planning</p>
</div>
<div class="flex items-start gap-4">
<div class="flex flex-col items-center">
<div class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-[var(--ws-color-accent)] text-xs font-bold text-white">2</div>
<div class="mt-1 h-10 w-px bg-[var(--ws-color-border)]"></div>
</div>
<p class="pt-1 text-sm font-medium text-[var(--ws-color-text)]">Design & prototype</p>
</div>
<div class="flex items-start gap-4">
<div class="flex flex-col items-center">
<div class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-[var(--ws-color-accent)] text-xs font-bold text-white">3</div>
<div class="mt-1 h-10 w-px bg-[var(--ws-color-border)]"></div>
</div>
<p class="pt-1 text-sm font-medium text-[var(--ws-color-text)]">Build & test</p>
</div>
<div class="flex items-start gap-4">
<div class="flex flex-col items-center">
<div class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-[var(--ws-color-bg-secondary)] border border-[var(--ws-color-border)] text-xs font-bold text-[var(--ws-color-text-soft)]">4</div>
</div>
<p class="pt-1 text-sm font-medium text-[var(--ws-color-text-soft)]">Deploy & iterate</p>
</div>
</div>
</div>
<!-- Right: Scrollable cards -->
<div class="flex flex-col gap-8">
<!-- Step 01 -->
<div class="rounded-2xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] p-8">
<span class="text-6xl font-black text-[var(--ws-color-text-soft)]/20 leading-none">01</span>
<div class="mt-3 flex items-start gap-4">
<div class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-indigo-100 text-indigo-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
</div>
<div>
<h3 class="text-lg font-bold text-[var(--ws-color-text)]">Discovery & planning</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-color-text-soft)]">We start by understanding your goals, users, and constraints. Kick-off workshop → sitemap → feature list. No guesswork, just clarity.</p>
</div>
</div>
</div>
<!-- Step 02 -->
<div class="rounded-2xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] p-8">
<span class="text-6xl font-black text-[var(--ws-color-text-soft)]/20 leading-none">02</span>
<div class="mt-3 flex items-start gap-4">
<div class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-violet-100 text-violet-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
</div>
<div>
<h3 class="text-lg font-bold text-[var(--ws-color-text)]">Design & prototype</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-color-text-soft)]">High-fidelity wireframes and interactive prototypes. You see the product before a single line of code is written.</p>
</div>
</div>
</div>
<!-- Step 03 -->
<div class="rounded-2xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] p-8">
<span class="text-6xl font-black text-[var(--ws-color-text-soft)]/20 leading-none">03</span>
<div class="mt-3 flex items-start gap-4">
<div class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-emerald-100 text-emerald-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
</div>
<div>
<h3 class="text-lg font-bold text-[var(--ws-color-text)]">Build & test</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-color-text-soft)]">Agile sprints with daily standups and weekly demos. Automated testing + accessibility checks baked into every PR.</p>
</div>
</div>
</div>
<!-- Step 04 -->
<div class="rounded-2xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] p-8">
<span class="text-6xl font-black text-[var(--ws-color-text-soft)]/20 leading-none">04</span>
<div class="mt-3 flex items-start gap-4">
<div class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-amber-100 text-amber-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<div>
<h3 class="text-lg font-bold text-[var(--ws-color-text)]">Deploy & iterate</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-color-text-soft)]">Zero-downtime deployment. Post-launch monitoring and a 30-day support window to squash anything that slips through.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
cardsstickyscrollstepshow-it-worksnumberedlayout
Slots
| Name | Required | Description |
|---|---|---|
| sticky-panel | Yes | Sticky left column with heading, description, and step progress indicator. |
| cards | Yes | Four numbered step cards with icon, title, and description. |
Two-column layout with a sticky left panel and a scrollable right column of four numbered cards. The left panel contains a section heading, paragraph, and a vertical step progress indicator (numbered dots connected by lines). Each right-column card shows a large muted step number (01–04), a colored icon, title, and description. On mobile both columns stack vertically.