36 CSS Stacked Cards

A stacked card layout displays multiple cards in a physically-layered arrangement — one card on top with others peeking behind, fanned outward, arranged in a 3D isometric plane, or pinned as a sequential scroll deck. The pattern appears across every category of tier-1 product: Apple product pages (iPhone / iPad / Mac product tours use scroll-driven sticky card stacks), Stripe billing dashboards (isometric pricing tiers), Vercel and Linear onboarding tours (Progressive Disclosure Step Stack pattern), Notion marketing (Scroll-Activated Sticky Stack for “How It Works” sequences), Superhuman and Framer landing pages (dynamic tabbed stack decks), Tinder / Bumble / Hinge / Coffee Meets Bagel (horizontal swiper deck — the dating-app pattern that made stacked cards mainstream), Airbnb / Vrbo / Booking (listing photo card stacks), Zillow / Realtor.com / Redfin (property gallery card stacks), Netflix / Disney+ / HBO Max (continue-watching card rows), Robinhood / Coinbase / Interactive Brokers (portfolio card stacks), and every SaaS testimonial rotator (Stripe, Vercel, Notion, Linear, Framer customer quote sliders). This gallery ships 36 hand-coded stacked card patterns covering the full range — 25 Pure CSS and 11 with under 40 lines of vanilla JS. Every demo is scoped under .scd-NN for no-collision pasting, WCAG 2.2 accessible with proper ARIA / keyboard / reduced-motion support, and works without Swiper.js, Framer Motion, react-tinder-card, GSAP, or any framework wrapper.

The Scroll-Driven Scaling Stack (Demo 01, isNew) and Scroll-Activated Sticky Stack (Demo 29) together ship the exact pattern Apple, Stripe, Linear, Notion, Superhuman, and Framer use on product marketing pages. The pattern: as the user scrolls a vertical sequence of feature cards, each card pins to the top via position:sticky when it reaches the target offset, then the next card slides up and over it. Previous cards visually recede via transform:scale(0.94) + filter:brightness(0.7) — creating a “stack building up” feel that anchors the reader on the current step without losing context of previous steps. Two implementation paths: (1) modern CSS-only using animation-timeline:view() (Chrome 115+, July 2023) — pure scroll-driven CSS with zero JavaScript, but requires a Chromium fallback; (2) IntersectionObserver + rAF handler that reads each card's scroll progress and applies the scale + brightness transform — ~30 lines of vanilla JS, works in every current browser. For SaaS product pages targeting tier-1 tech buyers, this pattern converts reader attention into scroll depth in a way no static section stack achieves. Ad CPMs on SaaS product marketing / onboarding-tour content run 8-15 USD baseline, 15-25 USD on pricing / signup landing pages.

The Horizontal Swiper Deck (Demo 02, Tinder-style, isNew) and Swipe Stack (Demo 20) ship the exact drag-to-discard pattern that Tinder, Bumble, Hinge, Coffee Meets Bagel, OkCupid, Match, Grindr, and every modern dating app uses since Tinder popularised it in 2012. Under 50 lines of vanilla JS. The pattern: top card in the deck listens for pointerdown, then pointermove translates the card by the pointer delta and rotates it slightly (rotate(deltaX * 0.05deg) — the physical “tilt as you swipe” feedback). On pointerup, if the horizontal delta exceeds a threshold (~35% of card width), animate the card off-screen and shuffle it to the back of the deck; otherwise spring it back to center via a cubic-bezier ease-out transition. Uses the unified pointer API (pointerdown / pointermove / pointerup) — one code path handles mouse, touch, and stylus. Add left/right badges (❌ / ✓) that fade in based on swipe direction for the classic Tinder overlay. Ad CPMs on dating / social discovery content in tier-1 markets run 8-15 USD; the swipeable deck pattern is the highest-signal UI for that vertical.

The Pure CSS Testimonial Slider (Demo 30), Glassmorphic Floating Testimonial Stack (Demo 03, isNew), and Notification Pile (Demo 25) together cover the SaaS testimonial-rotator pattern. The Pure CSS variant uses hidden radio inputs as the source of truth for which testimonial is active — each radio's :checked state drives the visible card via sibling combinators (input:checked ~ .card-N { transform: translateY(0); z-index: 3 }). Clicking a dot (which is a <label for="radio-id">) checks the corresponding radio, and CSS does the rest. Zero JavaScript. The glassmorphic variant adds a backdrop-filter:blur(20px) on the front card for a premium enterprise feel — matches the aesthetic Stripe, Linear, and Vercel ship on their pricing pages. Critical accessibility notes: testimonials must be honest — FTC 16 CFR § 255 (Endorsements Rule, updated November 2023) requires substantiation for material claims; fabricated quotes are a compliance risk. For SaaS / finance / healthcare testimonials, disclose compensation or affiliations per FTC guidelines. For international rollout, GDPR-EU and CCPA-CA require testimonial subjects to consent to use of their name and image for marketing (Article 6(1)(a) + California Civil Code § 3344). Ad CPMs on SaaS content run 8-15 USD baseline, 15-25 USD on pricing pages — a hand-coded testimonial rotator beats a bloated Swiper.js integration for both Core Web Vitals and enterprise-buyer trust.

The 36 stacked card demos in this gallery are built to the WCAG 2.1 AA baseline every enterprise SaaS RFP quotes and the new WCAG 2.2 SC 2.4.13 focus-appearance requirement that landed October 2023. Concretely: every interactive card is either a real <button>, real <a href>, or a focusable element with tabindex="0". Every card keeps a visible :focus-visible ring at 2px minimum with 3:1 contrast (WCAG 2.4.13). State changes (card shuffle, card flip, deck advance) announce via aria-live="polite" so screen readers report the currently-active card. Continuous animations (Spiral Tower rotation, Notification Pile pulse, Scroll-Driven Scale) wrap in @media (prefers-reduced-motion:reduce) { animation: none } per WCAG 2.3.3. Icon-only controls (swipe hints, dot pagination, card flip triggers) carry aria-label. The <time datetime="YYYY-MM-DD"> element is used for Timeline Stack milestone dates. This meets US Section 508 refresh (36 CFR Part 1194 incorporates WCAG 2.0 AA by reference), UK EN 301 549 for public sector procurement, Australia DDA + Digital Service Standard, Canada ACA, and Ontario AODA Section 14. If your enterprise buyer runs axe-core, Deque WAVE, or Lighthouse Accessibility against the checkout, all 36 demos pass zero-violation.

The 3D Overlapping Stacked Cards Isometric View (Demo 31), 3D Perspective Hover Tilt Stack (Demo 06, isNew), Perspective Deck (Demo 33), and Isometric Tower (Demo 22) cover the isometric-3D pricing tier pattern that Stripe Billing, Chargebee, Recurly, Paddle, and premium SaaS product pages ship. The recipe: parent gets perspective:1200px; each pricing tier card sets transform:rotateX(55deg) rotateZ(-45deg) translateZ(N*20px) where N is the card's stack index — the two rotations produce the classic isometric tilt (used in architecture drawings, video games like Monument Valley, and technical illustration), and the translateZ lifts each tier forward in 3D space. Hover eases the rotation toward zero so all three tiers present readably for price inspection. Requires transform-style:preserve-3d on the parent so children render in 3D. Every pricing tier must show its actual price at rest — don't require hover to reveal prices, or mobile users lose the primary information. Add a “Most Popular” ribbon on the middle tier for the classic Stripe / Superhuman conversion pattern. SaaS pricing pages carry 15-25 USD CPM in tier-1 markets — this pattern converts visitors into pricing-page dwell time better than flat pricing tables.

Swiper.js weighs 42KB gzipped and requires initialization JavaScript on every page load. Framer Motion is 60KB + React runtime dependency. react-tinder-card is 15KB + React. GSAP + Draggable plugin is 30KB. Every one of them ships as a runtime dependency that hurts Core Web Vitals — LCP, INP, CLS all take a hit from the framework hydration cost. The 36 stacked card demos in this gallery ship as zero-KB dependencies — 25 Pure CSS and 11 with under 40 lines of vanilla JS. LCP unaffected. INP unaffected. CLS unaffected. Framework-agnostic — drop into React (rename class to className), Vue, Svelte, Astro, Next.js, Remix, SvelteKit, Solid, Qwik, or plain HTML. Every demo uses the modern Pointer Events API (unified mouse + touch + stylus) so there's no separate touch-handling code path. Reserve JS libraries for products that genuinely need dynamic-content-driven decks (Tinder with 10,000 profiles fetched from an API) — for landing pages, marketing sections, product tours, and pricing pages, hand-coded stacked cards are strictly better for bundle size, Core Web Vitals, and design-system uniqueness.

Eleven demos use vanilla JavaScript — all under 40 lines each, no framework dependencies. The JS demos are: Horizontal Swiper Deck / Tinder-style (Demo 02 — pointer drag + threshold discard), 3D Perspective Hover Tilt Stack (Demo 06 — cursor-tracked rotateX/rotateY), Progressive Disclosure Step Stack (Demo 07 — click-to-advance state machine), Swipeable / Click-to-Front Stacked Cards (Demo 09 — pointer drag with rotate feedback), Swipe Stack (Demo 20 — Tinder-lite variant), Accordion Card (Demo 21 — click-to-expand with ARIA), 3D Flip Stack (Demo 23 — click-to-flip with rotateY), Tilt on Hover (Demo 24 — cursor-tracked tilt), Notification Pile (Demo 25 — click-to-dismiss with stack shift), Scratch Cards (Demo 27 — canvas-based scratch-off with pointer coordinates), and Scroll-Activated Sticky Stack (Demo 29 — scroll-progress observer). The other 25 demos are Pure CSS using :hover, :focus-within, :checked radio state, position:sticky, animation-timeline:view(), pseudo-elements, sibling combinators, and @keyframes. All JS demos degrade gracefully — every card's content is fully visible without JS (touch + keyboard users see the resting stack with all content present). Every continuous animation respects @media (prefers-reduced-motion:reduce). No library required for any of them.

The stacked card patterns in this gallery are the presentation layer — they display data your app has already fetched. For real-product integration: (1) Stripe pricing tiers (Demos 06, 22, 31, 33) — fetch tiers from Stripe Products / Prices API, map each tier's metadata.features array to the card's feature list; the isometric tilt highlights the middle tier visually. (2) Airbnb / Vrbo / Booking listing card stack (Demo 04 Stacked Expansion Accordion, Demo 05 Interactive Fan-Out Photo Stack) — fetch listing photos from your ListingImages endpoint; expand on hover to reveal detail cards with beds/baths/sqft/price/nightly-rate. Real-estate ad CPMs run 15-30 USD tier-1 metro. (3) Netflix / Disney+ / HBO Max content row (Demo 09 Swipeable Stacked Cards) — fetch content from your catalog endpoint, use the swipe deck for “continue watching” or curated genre rows. (4) Coinbase / Robinhood portfolio card stack (Demo 25 Notification Pile, Demo 26 Receipt Roll) — display recent transactions or asset holdings as a scrollable receipt stack. (5) HIPAA patient portal card review (Demo 15 Cascade Lift, Demo 21 Accordion Card) — display Epic MyChart appointment cards or Cerner chart-review cards; each card is a real <article> with proper heading hierarchy for screen readers. Fintech ad CPMs 25-45 USD, healthcare 30-50 USD in tier-1 markets — high-CPM verticals justify hand-coded quality.