20 CSS Cards

A CSS card is a self-contained container that groups related content — typically an image, headline, meta text, and action — into a single tappable unit. Cards are the most-copied UI pattern on the web: every e-commerce product tile, pricing plan, blog preview, testimonial, real estate listing, dashboard KPI, and video thumbnail is a card. This gallery ships 20 hand-coded examples covering the exact patterns developers Google for by name.

Match the pattern to the content and audience. E-commerce and marketplace grids ship Demo 01 [Product Grid Card](/components/css-product-cards/) (image, price, star rating, add-to-cart — the Shopify/Amazon/Everlane convention, with Kahneman anchoring via strikethrough price and a NEW badge that Baymard research shows lifts click-through 8-12%). SaaS pricing pages ship Demo 02 Pricing Tier Card (three-plan row with a lifted 'Most Popular' middle tier — the Iyengar three-option decoy-effect sweet spot, ~30-40% middle-tier selection lift per Baymard). Recipe sites and food apps ship Demo 03 Recipe Food Card (cook time, servings, difficulty in a symmetric grid — Kahneman cognitive fluency plus Baymard cook-time-first scanning). Real estate portals (Zillow, Redfin, Compass) ship Demo 04 Real Estate Property Card (price-first hierarchy, beds/baths/sqft, agent, save-heart — non-negotiable price hierarchy per Zillow usability research). Booking platforms ship Demo 05 Hotel Travel Booking Card (rating, amenities, nightly rate, guest/date summary, total price — Booking.com A/B-validated total-price transparency lever). Editorial and publisher grids ship Demo 06 Blog Post Preview Card (cosmic thumbnail, category, author, read-time — the Vercel/Linear/Stripe blog register) or Demo 07 Horizontal Article Card (landscape Medium/Substack layout that stacks vertically on mobile). Landing pages and product marketing pages ship Demo 08 Testimonial Review Card (five stars, blockquote, author with role and company — Cialdini social-proof stacking) or Demo 12 SaaS Feature Highlight Card (icon tile, title, arrow-slide learn-more link — the Linear/Notion/Figma feature-grid register). Media and content platforms ship Demo 09 Video Playback Preview Card (16:9 thumbnail, centered play button, duration pill, creator row — YouTube CTR convention: thumbnail → title → duration → creator scan order). Community and open-source sites ship Demo 10 Leaderboard Ranking Widget (top-5 contributors with CSS counters and gold/silver/bronze gradient rank numbers — GitHub-trending register). Team and about pages ship Demo 11 Team Member Profile Card (avatar, role, bio, social row — Slovic identifiability effect where a named face converts 30-40% harder than abstract team blocks). Contact and CRM UIs ship Demo 13 Interactive Digital Business Card (vCard landscape layout with mailto and tel links — the Cardd/Apple Contacts register). Designer and dev portfolios ship Demo 14 Portfolio Project Card (CSS-drawn dashboard mockup thumbnail that scales on hover, concrete metric like '41% faster time-to-insight' as Cialdini authority signal). Analytics and admin dashboards ship Demo 15 Analytics Dashboard Stat Card (KPI tile with big number, trend delta, and mini sparkline — the Stripe Sigma/Amplitude/Vercel Analytics register, no motion because dashboards need trust not delight). The visual-effect cards land on landing pages and hero sections where 'this feels premium' is the pitch: Demo 16 3D Flip Business Card (flips on hover AND focus-within so keyboard users can access the back), Demo 17 Glassmorphism SaaS Card (backdrop-filter frost over an aurora background — the Apple Vision Pro / Stripe checkout register), Demo 18 Gradient Border Glow Card (rotating conic-gradient border with outer bloom — the AI SaaS launch tile visual dialect used by Vercel v0 and Anthropic feature drops), Demo 19 3D Pop-Out Character Card (product tile with subject scaling beyond the photo frame — creative e-commerce microsite pattern used by Nike and Airbnb), and Demo 20 [Stacked Card Cascade](/components/css-stacked-cards/) (three-card task stack that fans open on hover — the Notion/Linear task-list convention that signals 'there's more here').

The pattern across all 20 demos: use clamp() for scale-sensitive properties and min-height: 100vh; width: 100%; display: block on the demo root so the themed background paints edge-to-edge in the /try/ playground iframe (a bug that ships in most legacy CSS gallery sites). Nested card interiors use max-width: 320-380px for readability with margin-left: auto; margin-right: auto for horizontal centering. Grid layouts (Demo 02 Pricing three-column, Demo 07 Horizontal Article two-column) collapse to single column at max-width: 640px — one breakpoint, not five. For iOS Safari specifically, 100vh jumps 60-80px mid-scroll when the address bar collapses (a Core Web Vitals CLS event); use min-height: 100svh (small viewport height) instead — supported in every browser since 2022. All interactive controls hit WCAG 2.5.5 44×44px minimum touch targets: add-to-cart buttons, save-heart icons on property and hotel cards, play buttons on video cards, RSVP buttons, follow buttons, download buttons. Every continuous animation is guarded by @media (prefers-reduced-motion: reduce) — the conic-gradient rotation on Demo 18 Gradient Border, the 3D flip on Demo 16, the pop-out scale on Demo 19, the cascade fan on Demo 20 all respect the pref. WCAG 2.3.3 (Animation from Interactions) is non-negotiable; ship the guard on every keyframe-driven demo. All text contrast pairs meet WCAG 1.4.3 AA (4.5:1 for normal text, 3:1 for large 18px+ or 14px bold) — the muted-support text on some demos sits right at the AA edge, so bump one shade darker if your compliance target is AAA (procurement checkbox on enterprise SaaS). Every SVG icon carries aria-hidden="true" (decorative — the text next to it carries meaning), except star ratings where the container has role="img" aria-label="Rated 4.8 out of 5 by 127 reviewers" so screen readers announce the semantic rating. Every button is a real button type='button' element (not a div with a click handler), every link is a real anchor with href — WCAG 4.1.2 name/role/value satisfied by default without extra ARIA.

Both work, and the right pick depends on the internal shape. Use CSS Grid when the card needs multi-dimensional alignment — Demo 04 Real Estate Property Card's specs strip (beds/baths/sqft) uses display: grid; grid-template-columns: repeat(3, 1fr) because it needs equal-width columns AND equal-height rows for the dt/dd pairs. Demo 07 Horizontal Article Card uses grid-template-columns: 200px 1fr for the image-plus-text split, then flips to grid-template-columns: 1fr under 640px for mobile stacking — Grid handles this without changing the DOM order or reflow-shifting. Demo 15 Analytics Dashboard Stat Card uses grid for the 7D/30D/90D timeframe tab row. Use Flexbox when the card is a one-dimensional stack or row — Demo 01 Product Grid Card's body is a vertical flex column so the CTA button sinks to the bottom regardless of feature-list length. Demo 08 Testimonial Review Card's cite row uses display: flex; align-items: center; gap: 12px to align avatar and author-meta. Demo 20 Stacked Card Cascade's meta row uses flex for overlapping avatars. Rule of thumb: grid for tables and split layouts, flex for stacks and rows. Both are supported in every browser since IE11 (Grid since 2017), so there's no compatibility trade-off. For the card grid layout AROUND these cards on your own page (product listings, blog archives), use CSS Grid with grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px — the browser handles wrap points automatically as viewport width changes.

Yes on both. Every card is MIT licensed — free for personal and commercial projects, no attribution required (though a link back is always appreciated). Every demo is plain HTML and CSS with no build step, no dependencies, no framework lock-in. Drop the HTML into a React component's JSX (React's className instead of class), a Vue single-file component's template, a Svelte component, or an Astro island — the CSS ships as a scoped module, an inline style block, or a Tailwind arbitrary-value paste (each demo's customization notes cover the Tailwind mapping). The 3D Flip Business Card (Demo 16) uses :focus-within for keyboard accessibility which works out of the box in React and Vue. The pricing card (Demo 02), video card (Demo 09), and vote card (Demo 20) use only CSS pseudo-classes for state, so React state hooks and Vue refs aren't needed. Frameworks with strict CSP (Content-Security-Policy script-src 'self' without 'unsafe-inline') will block inline onclick — none of these demos use inline handlers, so CSP is satisfied by default. React StrictMode double-mount doesn't affect any of the CSS-only demos. Next.js App Router streaming SSR renders these cards on the server without hydration flash — verified across the 20 demos. Vue 3 v-model bindings for form-like cards (Demo 15's timeframe tabs, if you make them stateful) should bind class instead of value to avoid fighting the CSS state. See each demo's gotchas notes for framework-specific edge cases.