18 CSS Product Cards

A CSS product card is the compact merchandising surface that renders one product in an e-commerce grid — image, name, price, one or two badges (sale, new, out-of-stock), and a primary action (Add to Cart, Quick View, Details). Every serious e-commerce platform (Shopify Dawn, WooCommerce Storefront, BigCommerce Cornerstone, Stripe Checkout, Squarespace Fluid Engine, Wix Editor X) ships a variant of the same anatomy: image on top (typically aspect-ratio 1/1 or 4/5), name + price row below, optional star rating + review count, and the primary CTA appearing either always-visible (mobile-first) or on hover (desktop). This gallery ships 18 hand-coded patterns covering the exact idioms tier-1 e-commerce developers Google for by name — hover-reveal Add-to-Cart (Demo 01), pure-CSS 3D flip with spec back (Demo 02), contained image zoom (Demo 03), mouse-tracking 3D tilt (Demo 04), slide-up details panel (Demo 05), minimalist fashion (Demo 06), glassmorphism (Demo 07), dark-mode gadget (Demo 08), neon glowing border (Demo 09), Material Design elevation (Demo 10), horizontal cart/compare row (Demo 11), CSS Grid catalog layout (Demo 12), sale/coupon ribbon (Demo 13), sneaker color+size picker (Demo 14), digital download (Demo 15), food-delivery with quantity stepper (Demo 16), real-estate listing (Demo 17), and SaaS subscription pricing (Demo 18). 16 demos are pure CSS with zero JavaScript; only 2 use vanilla JS (Demo 04 pointer-tracking tilt, Demo 16 +/- quantity stepper). Every demo uses semantic HTML with real button and anchor elements — never clickable divs — and passes WCAG 2.1 SC 4.1.2 name-role-value by construction. Every demo scopes under .cpc-NN (CSS Product Card, deliberately not .pc-NN which is claimed by css-profile-cards) so multiple product-card patterns coexist on one page without style bleed.

Google Shopping and Google Search product rich results depend on schema.org/Product structured data. Wrap the entire product card in an element with itemscope itemtype="https://schema.org/Product", then annotate the semantic parts with itemprop: itemprop="name" on the product name, itemprop="image" on the img tag, itemprop="description" on any description text, and nest an itemprop="offers" block with itemscope itemtype="https://schema.org/Offer" containing itemprop="price", itemprop="priceCurrency" (USD, GBP, CAD, AUD, NZD, EUR), and itemprop="availability" (schema.org/InStock, OutOfStock, LimitedAvailability, PreOrder, BackOrder, Discontinued). For reviews, add nested itemprop="aggregateRating" with itemprop="ratingValue" and itemprop="reviewCount". Test with Google's Rich Results Test at search.google.com/test/rich-results — a valid product card qualifies for the star-rating overlay in Google search results, the product carousel on mobile SERPs, and Google Shopping placement. All 18 demos in this collection use semantic HTML that maps cleanly to schema.org/Product — you don't need to change any markup, just add the itemscope/itemtype/itemprop attributes on top of the existing structure. For JSON-LD format (recommended over microdata), emit a script tag with type application/ld+json alongside the visible card containing the same Product schema; this is what Shopify Dawn, WooCommerce, BigCommerce, and Stripe Checkout all default to. Rich Results eligibility requires at least name, image, and either offers.price + offers.priceCurrency or aggregateRating — everything else is optional but improves the SERP presentation. Missing image is the #1 disqualifier; use itemprop=image on the largest available product image, not a thumbnail.

All three platforms use template files that render each product in a loop, so the integration path is the same shape across engines. For Shopify Dawn (Liquid), edit sections/main-collection-product-grid.liquid or snippets/card-product.liquid and paste one of these product-card templates as the loop body, replacing the placeholder {{ product.title }}, {{ product.price | money }}, {{ product.featured_image | image_url }}, and {{ product.url }} tokens. Shopify's own Dawn default uses Demo 01's hover-reveal Add-to-Cart pattern or Demo 05's slide-up details panel with the primary color from theme settings. For WooCommerce Storefront (PHP), edit content-product.php or use the woocommerce_before_shop_loop_item / woocommerce_shop_loop_item_title / woocommerce_after_shop_loop_item_title hooks to insert the card markup; replace price with <?php woocommerce_template_loop_price(); ?>, image with <?php woocommerce_template_loop_product_thumbnail(); ?>. For BigCommerce Cornerstone (Handlebars via Stencil), edit templates/components/products/card.html and inject the CSS + markup around {{name}}, {{price.without_tax.formatted}}, {{getImage image 'productgallery_size'}}. Common gotchas: (1) Shopify's cart drawer and Ajax add-to-cart expects a form with data-type='product' — the Add-to-Cart CTA in Demo 01 should submit that form, not a static anchor. (2) WooCommerce inserts stock-status classes automatically via body_class() — style your out-of-stock badge against .product.outofstock. (3) BigCommerce's product-card class is applied at the card root; scope your .cpc-NN inside a specificity-safe rule to avoid Cornerstone's default styles winning. All three platforms serve product images via CDN with the WebP/AVIF format negotiated by Accept headers — don't hardcode .jpg, use the platform's image helper. E-commerce product cards carry $3-7 CPM baseline in tier-1 markets but drive $15-25 CPM once combined with add-to-cart or checkout intent (the visitor is measurably closer to purchase). Compliance callout: FTC 16 CFR § 238 (Bait Advertising) requires that any pricing shown in the card be accurate at click-through — hiding a shipping surcharge that appears only at checkout is a real FTC risk. State AG offices (California AG, New York AG, Texas AG) actively investigate deceptive e-commerce pricing.

Demo 17 Real-Estate Listing Card ships the exact anatomy Zillow, Redfin, Realtor.com, Compass, Coldwell Banker, and Sotheby's International Realty all use for their listing grids: hero image full-bleed at the top with aspect-ratio 3/2 (never 1/1 for real estate — horizontal reads as more architectural), a photo-count badge overlay in a corner ("1 / 24") because buyers want to know how much visual coverage each listing offers, the price in bold as the first line below the image (buyers scan by price first, address second — this is Baymard research confirmed on Zillow's own eye-tracking studies), then the address on line two, and beds/baths/sqft as a small tabular row (typically with the interpunct separator: "3 bd · 2 ba · 1,850 sqft"). For short-term rentals (Airbnb, Vrbo, Booking.com), swap sqft for nightly rate and add a review row with star rating and count. Compliance for real-estate cards is non-negotiable: (1) Fair Housing Act (42 U.S.C. § 3604) prohibits any advertising language that indicates preference or discrimination based on race, color, religion, sex, disability, familial status, or national origin — the visible card copy AND alt text on the hero image must be scrubbed. HUD investigates listings whose imagery systematically hides accessibility features (ramps, wide doorways, ground-floor entrances) in favor of "cleaner" architectural shots. (2) State real-estate license disclosure requirements vary — California DRE, Texas TREC, New York DOS all require the listing agent's license number visible on any card that displays the property. Bake into the card footer as a small text row: "Listed by Jane Smith, DRE #01234567". (3) MLS IDX rules require the MLS logo and last-updated timestamp visible on any listing card sourced from an MLS feed — check your MLS agreement (California CRMLS, Texas HAR, New York REBNY, Florida Miami Association of Realtors each have different disclosure formats). Real-estate listing cards carry $15-30 CPM in tier-1 US markets, $25-50 in tier-1 metros (NYC, SF, LA, Seattle, Boston, DC, Miami). Short-term rental Airbnb / Vrbo / Booking.com cards carry $8-15 CPM standalone but drive $20-35 CPM once combined with dates-selected or check-availability intent. For SEO, wrap the card in itemscope itemtype="https://schema.org/RealEstateListing" with itemprop="floorSize" (QuantitativeValue with unitCode SQFT), itemprop="numberOfBedrooms", itemprop="numberOfBathroomsTotal", and itemprop="offers" containing price + priceCurrency — this qualifies the listing for Google Search RealEstateListing rich results with the price and beds/baths in the SERP overlay.

Demo 18 Subscription Pricing Card ships the canonical SaaS tier-card anatomy: tier name at the top (Free / Pro / Team / Enterprise), price line with the currency symbol, /month or /year toggle-driven suffix, then a feature list with checkmarks below, and a primary CTA (Start free trial, Subscribe, Upgrade to Pro) at the bottom. The middle tier is typically "most popular" — highlighted with an accent border and a ribbon badge — because Baymard SaaS pricing-page research shows the middle-tier prominence lifts conversion 12-18% on Stripe / Vercel / Linear / Notion / Superhuman / Framer pricing surfaces. Structure: three tiers side-by-side on desktop (grid-template-columns: repeat(3, 1fr)) collapsing to one column stacked below 720px. Pricing displayed with tabular-nums so "$29" and "$99" columns don't jiggle when the /year toggle changes them to "$290" and "$990". FTC 16 CFR § 425 (Negative Option Rule) requires that any pricing card with an auto-renewal subscription must show the renewal terms clearly — "Auto-renews at $29/month, cancel anytime" MUST be visible near the CTA, not buried in TOS. Non-compliance is a real cost: Amazon Prime paid $25M FTC settlement in 2023 for Prime cancellation obscurity, Vonage paid $100M in 2022, Adobe paid $40M in 2024 for Creative Cloud auto-renewal. California AB 390 (2018) and NY GBL § 526-b require one-click cancellation matching the subscribe flow's simplicity — link to /cancel from every payment surface. FTC 16 CFR § 255 (Endorsements Rule, 2024 refresh) additionally applies if the pricing card shows testimonials — every testimonial must be genuine and disclose material connections. For integration with Stripe Billing, the CTA should submit to a Stripe Checkout session (checkout.stripe.com) rather than directly charging — this keeps the card PCI DSS SAQ-A compliant. For Chargebee, Recurly, and Paddle, use their hosted checkout flows for the same PCI benefit. SaaS pricing cards carry $15-25 CPM in tier-1 markets, higher for fintech-adjacent SaaS (Ramp $25-45, Brex $25-45, Stripe Atlas $30-50, Mercury $25-40) once the visitor lands on a tools/plan page. For SEO, wrap each tier in itemscope itemtype="https://schema.org/Offer" with itemprop="price", itemprop="priceCurrency", and itemprop="priceValidUntil" — this qualifies the pricing page for Google's Offer rich results and can trigger the "Prices from $X" enhancement in the SERP snippet.

Product-card grids are the #1 cause of Poor Core Web Vitals scores on e-commerce sites — three failures dominate. First, LCP (Largest Contentful Paint): the hero image of the first visible product card is typically the LCP element on a listing page. If the card ships 20 hi-res images upfront, the browser fetches all 20 before rendering the first one. Fix: loading="lazy" on every image EXCEPT the top 4-6 above-the-fold cards, which get loading="eager" + fetchpriority="high". Also use srcset with a small 200-400w variant for mobile so a 3G Android doesn't download the 1200w desktop hero. Target LCP under 2.5s. Second, CLS (Cumulative Layout Shift): late-loading images without reserved dimensions shift the card content the moment they load, and if the shift happens above the fold, CLS jumps above the 0.1 threshold. Fix: set explicit width + height attributes on every img OR use aspect-ratio on the img container (aspect-ratio: 1/1 or 4/5 for e-commerce, 3/2 for real estate). Every demo in this collection uses aspect-ratio on the .cpc-NN__img container. Third, INP (Interaction to Next Paint): hover-reveal effects (Demo 01, Demo 05) that animate box-shadow or filter on hover can trigger repaints during scroll on mid-tier Android, pushing INP above the 200ms Google "Poor" threshold. Fix: animate only transform + opacity, never box-shadow blur radius or filter: blur() (both are paint-heavy). Every demo in this collection follows this rule. For the mouse-tracking tilt (Demo 04), throttle the pointermove handler with requestAnimationFrame — the code sample already does this. Measure with Chrome DevTools Performance Insights, Lighthouse (Mobile profile), PageSpeed Insights, or WebPageTest with a Slow 4G / Moto G4 profile — desktop performance masks all three failures. Google Search Console's Core Web Vitals report groups similar pages, so a single bad product-card template affects your entire /collections/ or /shop/ tree. Fixing one template lifts every product page's ranking simultaneously.

shadcn/ui Card: React component with Tailwind CSS styling, ~5KB. Card + CardHeader + CardTitle + CardContent + CardFooter primitives. Ships accessibility (button semantics, focus rings) but the visual styling is deliberately neutral — you own the CTA row, price treatment, and image aspect-ratio. Requires React + Tailwind. MUI Card: full-featured, ~25KB gzipped, ships Material Design 3 with CardActionArea for the hover interaction. Overkill for a single product-card pattern but comprehensive if you're already in MUI. Chakra Card: similar footprint (~22KB), simpler API. Ant Design Card: 35KB, includes hoverable, cover image, and Meta primitives — the pattern most Chinese e-commerce clones ship (Taobao / JD.com aesthetic). Tailwind UI Product Cards: paid, ~$300 lifetime; unstyled Tailwind class strings — you copy-paste HTML rather than importing a component. Aceternity UI 3D Card Effect: 8KB, React-only, ships mouse-tracking tilt as a hook. Magic UI Product Card: 6KB, React-only. This collection vs all of the above: zero framework dependency, ~2-3KB per card in vanilla HTML/CSS/JS. Ships the same WCAG 2.1 accessibility patterns as shadcn/Radix (real button/anchor semantics, focus-visible mirroring hover, aria-labels on icon-only controls). Copy-paste into React, Vue, Svelte, Astro, or plain HTML without adapter code. For static Shopify/WooCommerce/BigCommerce marketing pages, this is the lowest-overhead approach. For dashboards + product-catalog apps with 100+ product-card instances, use shadcn/Radix — the shared logic reduces bundle bloat. Reserve MUI/Chakra/Ant for teams already invested in those design systems. Migration path: if you're using shadcn Card, our CSS-only product card designs can drop into the CardContent slot as pure styling — the accessibility contract is handled by the primitive; our CSS provides the visual layer. For Shopify Dawn theme and WooCommerce Storefront default themes, our patterns are the drop-in replacement for their built-in card variants — same semantic markup, better visual polish.

Yes — all 18 designs are MIT licensed and free for personal and commercial use, including client projects, SaaS products, design systems, and open-source libraries. MIT license requires only that you keep the copyright notice if you redistribute the source code as-is; in shipped production HTML/CSS/JS that you've adapted, no visible attribution is needed. If you ship one as part of an open-source UI library, a one-line credit pointing to https://codefronts.com is appreciated but not legally required. Accessibility: every interactive demo uses semantic HTML — real button and anchor elements (never clickable divs), proper form labels on the quantity stepper (Demo 16) and size/color pickers (Demo 14), aria-labels on icon-only controls (close, wishlist heart), aria-hidden on decorative overlays. Every demo carries a visible :focus-visible ring that mirrors the :hover state so keyboard users get the same reveal-on-hover interaction as mouse users. Every demo honours prefers-reduced-motion: reduce — transitions fall back to instant show/hide, tilt disables entirely. Verify your specific use case with axe DevTools, Lighthouse, WAVE, or WebAIM tools before shipping to EU EAA / US Section 508 / Canada ACA / UK Equality Act audits — the demos are AA-compliant by default but layout context matters. Compliance callouts embedded per demo: FTC 16 CFR § 238 Bait Advertising (Demo 01 Add-to-Cart, Demo 13 Sale Ribbon), Fair Housing Act 42 U.S.C. § 3604 (Demo 17 Real Estate), FTC 16 CFR § 425 Negative Option Rule (Demo 18 SaaS Subscription), FTC 16 CFR § 255 Endorsements Rule (any card with testimonials), state MLS IDX rules and real-estate license disclosure (Demo 17), PCI DSS SAQ-A tokenization via Stripe Elements / Braintree / Adyen (any card with a Buy Now CTA that hits payment), state consumer protection statutes on deceptive pricing (California AG, New York AG, Texas AG). Consult your legal / compliance team before production deployment in regulated verticals — the demos are starting points, not legal advice.