Responsive Product Card Html Css Codepen Jun 2026

A clean, semantic layout ensures the product card is accessible, SEO-friendly, and easy to style.

/* button */ .btn-card background: #1e3a5f; border: none; width: 100%; padding: 0.8rem 0; border-radius: 2.5rem; font-weight: 600; font-size: 0.9rem; color: white; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; font-family: inherit; box-shadow: 0 1px 2px rgba(0,0,0,0.05);

.product-card:hover .card-img img transform: scale(1.03);

/* ---------- RESPONSIVE CARD GRID (CSS Grid) ---------- */ .card-grid display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; justify-items: center; align-items: stretch; responsive product card html css codepen

Now each individual product card inside the grid will stretch to fill the column width, but it will never be narrower than 280px. The card’s internal content (image, text, button) automatically adjusts because we used relative units and width: 100% for the image and button.

that includes a "Quick View" popup button, ideal for browsing without leaving the grid. Nike-Style Clean UI UI Design Product Card

<div class="product-card"> <div class="card-img"> <img src="https://cdn-icons-png.flaticon.com/512/4358/4358353.png" alt="smart watch" loading="lazy"> <div class="badge green">−20% off</div> </div> <div class="card-content"> <div class="product-category">wearables</div> <h3 class="product-title">Orbit Smart Watch</h3> <p class="product-description">Heart rate, GPS, 7-day battery. Sleek AMOLED display & water resistant.</p> <div class="price-rating"> <div class="price">$159 <small>USD</small> <span class="old-price">$199</span></div> <div class="rating"> <span class="stars">★★★★★</span> <span class="rating-value">4.9</span> </div> </div> <button class="btn-card" aria-label="Add to cart">🛒 Add to cart</button> </div> </div> A clean, semantic layout ensures the product card

And everything will be showcased inside so you can play with the code live.

On a mobile screen, the layout shifted fluidly, stacking the image and text with a grace that felt natural. The Reveal

.card-img img max-width: 85%; height: auto; display: block; object-fit: contain; transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1); that includes a "Quick View" popup button, ideal

Creating a Responsive Product Card with HTML, CSS, and CodePen

A beautiful product card is worthless if it’s not accessible or slow.