Responsive Product Card Html Css Codepen Link

Here are several modern product card layouts and hover effects to guide your design: 39 Best CSS Card Design Templates 2026 - uiCookies 33 CSS Product Cards FreeFrontend Creating E-commerce Product Card using HTML CSS . learning Robo

Creating a responsive product card using HTML and CSS is a staple project for web developers. A solid implementation ensures that product information is clear and interactive across all screen sizes, from mobile phones to high-resolution desktops. Core Review: Essential Components & Best Practices

A high-quality product card on CodePen should balance aesthetic appeal with technical robustness. Reviewers and developers typically look for the following criteria: HTML CSS Product Card Design

A responsive product card is a fundamental UI component that adapts its layout to different screen sizes, ensuring a consistent user experience on mobile, tablet, and desktop. Building these on CodePen allows for rapid prototyping with live previews.  1. Structure with Semantic HTML 

Start by defining a clear structure in the HTML Panel using semantic tags for better accessibility. 

<div class="product-card"> <div class="product-image"> <img src="product.jpg" alt="Description of product"> div> <div class="product-details"> <span class="category">Running Collectionspan> <h2 class="product-title">Nike Air Maxh2> <p class="product-description">Lightweight foam cushioning for all-day comfort.p> <div class="product-footer"> <span class="price">$120.00span> <button class="add-to-cart">Add to Cartbutton> div> div> div> Use code with caution. Copied to clipboard 2. Styling for Layout and Modern Aesthetics 

In the CSS Panel, use a combination of Flexbox or CSS Grid to manage the card's internal layout.  Responsive Product Cards | HTML & CSS - Codepen.io

To create a responsive product card using HTML and CSS, you can use modern layout techniques like Flexbox or CSS Grid to ensure the card adapts to different screen sizes. Essential Code Components

HTML Structure: Typically includes a container div, an image area, product details (title, description, price), and action buttons like "Add to Cart". CSS Layout:

Image Handling: Use width: 100% on images to keep them contained within the card.

Media Queries: Use @media rules to change card widths or stack elements vertically for mobile users. High-Quality CodePen Examples

You can find and fork these templates on CodePen to experiment with the code directly.

Minimalist Responsive Card: A clean, centered layout using Montserrat fonts and soft box shadows.

E-Commerce Layout: A full-featured card with a product name, price, rating stars, and interactive "Add to Cart" buttons.

Modern UI Design: A sleek design focused on visual presentation and user interface.

Animated Hover Effects: Features scaling transitions and dynamic shadows when users hover over the product. Implementation Tips A Beginners Guide on How to Use CodePen - BootstrapDash responsive product card html css codepen

Version 1: The Minimal Flexbox Card (Beginner Friendly)

This is the fastest way to create a clean, responsive product grid. We will use CSS Flexbox’s flex-wrap property.

The Image Area

For a responsive card, the image is usually the tricky part. We want to ensure it doesn't distort.

.product-image 
  position: relative;
  height: 250px;
  overflow: hidden;
.product-image img 
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crops image nicely to fill the container */
  transition: transform 0.5s ease;
/* Zoom effect on hover */
.product-card:hover .product-image img 
  transform: scale(1.05);

The Responsive CSS (Flexbox)

.products-grid 
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 20px;
.product-card 
flex: 1 1 250px; /* Grow, Shrink, Basis */
max-width: 300px;
background: white;
border-radius: 12px;
padding: 15px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: transform 0.2s;
text-align: center;

.product-card:hover 
transform: translateY(-5px);

img 
width: 100%;
height: auto;
border-radius: 8px;

@media (max-width: 768px) 
.product-card 
flex: 1 1 100%; /* Takes full width on mobile */

Why this works: The flex: 1 1 250px tells each card to try to be 250px wide, but if the container shrinks, they shrink proportionally. The media query forces full width below 768px.

2. The CSS (The Magic)

We use CSS Grid and Flexbox. Notice how we switch layouts using a media query without writing duplicate code.

/* --- Global Reset & Setup --- */
* 
  box-sizing: border-box;
  margin: 0;
  padding: 0;
body 
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;

/* --- The Container (Just for demo centering) --- /
.product-container 
width: 100%;
max-width: 800px; / Limits width on huge screens */

/* --- The Card Logic --- /
.product-card 
background: white;
border-radius: 12px;
overflow: hidden; / Keeps image inside the rounded corners */
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
/* MOBILE DEFAULT: Column Layout */
display: flex;
flex-direction: column;
/* Smooth transition for hover effects */
transition: transform 0.3s ease, box-shadow 0.3s ease;

/* Hover Interaction for Desktop */
.product-card:hover 
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
 Here are several modern product card layouts and
/* --- Image Section --- /
.product-image 
position: relative;
flex-shrink: 0;
height: 250px; / Fixed height for mobile */
overflow: hidden;

.product-image img 
width: 100%;
height: 100%;
object-fit: cover; /* Prevents image distortion */
transition: transform 0.5s ease;

.product-card:hover .product-image img 
transform: scale(1.05); /* Subtle zoom on hover */

.product-badge 
position: absolute;
top: 15px;
left: 15px;
background: #e74c3c;
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;

/* --- Details Section --- /
.product-details 
padding: 25px;
display: flex;
flex-direction: column;
gap: 15px;
flex-grow: 1; / Ensures content fills available space */

.product-title 
font-size: 1.5rem;
color: #2c3e50;
font-weight: 700;

.product-subtitle 
color: #7f8c8d;
font-size: 0.9rem;
margin-top: -10px;

.product-description 
color: #555;
line-height: 1.6;
font-size: 0.95rem;

/* --- Footer & Price --- /
.product-footer 
margin-top: auto; / Pushes footer to the bottom */
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #eee;
padding-top: 20px;

.price-current 
font-size: 1.25rem;
font-weight: 700;
color: #27ae60;

.price-original 
font-size: 0.9rem;
color: #95a5a6;
text-decoration: line-through;
margin-left: 10px;

.add-to-cart 
background-color: #2c3e50;
color: white;
border: none;
padding: 10px 20px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s;

.add-to-cart:hover 
background-color: #34495e;

/* --- RESPONSIVE BREAKPOINT (Tablet/Desktop) --- /
@media (min-width: 600px) 
.product-card 
/ Switch to side-by-side layout /
flex-direction: row;
max-width: 700px; / Prevent card from getting too wide */

.product-image 
/* Image takes up 45% of the width /
width: 45%;
height: auto; / Height is now determined by content side */
 The Responsive CSS (Flexbox)
.product-details 
/* Content takes remaining space */
width: 55%;
padding: 30px;

Responsive Product Card (HTML + CSS)

HTML:

<div class="product-card">
  <img class="product-img" src="https://via.placeholder.com/400x300" alt="Product">
  <div class="product-body">
    <h3 class="product-title">Product Name</h3>
    <p class="product-desc">Short product description that’s clear and concise.</p>
    <div class="product-meta">
      <span class="price">$49</span>
      <button class="btn">Add to cart</button>
    </div>
  </div>
</div>

CSS:

:root
  --card-w: 340px;
  --radius: 12px;
  --accent: #0ea5a4;
  --muted: #6b7280;
  --bg: #ffffff;
  --shadow: 0 6px 18px rgba(0,0,0,0.08);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
*box-sizing:border-box
bodydisplay:flex;align-items:center;justify-content:center;padding:32px;background:#f3f4f6;min-height:100vh
.product-card
  width:100%;
  max-width:var(--card-w);
  background:var(--bg);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .22s ease, box-shadow .22s ease;
/* image area */
.product-img
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  background:#e5e7eb;
/* body */
.product-bodypadding:16px
.product-title
  margin:0 0 6px;
  font-size:1.05rem;
  line-height:1.2;
  color:#111827;
.product-desc
  margin:0 0 12px;
  color:var(--muted);
  font-size:.95rem;
/* meta row */
.product-meta
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
.price
  font-weight:700;
  color:#0f172a;
  font-size:1.05rem;
.btn
  appearance:none;
  border:0;
  background:var(--accent);
  color:white;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
.btn:activetransform:translateY(1px)
.btn:focusoutline:2px solid rgba(14,165,164,0.18); outline-offset:2px
/* hover */
.product-card:hover
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(2,6,23,0.12);
/* responsive variants */
@media (min-width:720px)
  .product-carddisplay:flex;gap:0;max-width:760px
  .product-imgwidth:50%;height:100%;min-height:260px
  .product-bodyflex:1;padding:20px 22px
  .product-metagap:18px
/* small screens: tighter spacing */
@media (max-width:360px)
  :root--card-w:320px
  .product-descfont-size:.9rem
  .pricefont-size:1rem

Usage notes:

• Replace the image src and text with real product data.
• Adjust --card-w and colors to match your theme.
• For CodePen: create an HTML panel with the markup and a CSS panel with the styles above.

Related search suggestions for improving or extending this (auto): I'll provide possible related search terms.

Creating a responsive product card is a fundamental skill for front-end development, often showcased on

to demonstrate clean UI/UX and modern layout techniques like Flexbox and CSS Grid. 1. Essential HTML Structure

A standard product card requires semantic elements to ensure accessibility and clear hierarchy: Card Container : A wrapping that holds all content. Image Wrapper

for the product image, often styled with specific aspect ratios or hover effects. Card Details : A container for text elements including: : Usually an for the product name.

tag, sometimes including a struck-through original price for sales. : Optional star icons often sourced from Font Awesome Action Button : An "Add to Cart" or "Buy Now" button. 2. Modern CSS Layout Strategies

To ensure the card fits various screen sizes, developers typically use one of two main methods: CSS Grid (Recommended for Galleries) grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))

to automatically fit as many cards as possible in a row, expanding them to fill remaining space. Flexbox (Recommended for Content Alignment) display: flex flex-wrap: wrap

on a parent container allows cards to stack vertically on smaller mobile screens. 3. Key Responsive Best Practices E-Commerce Responsive Product Card Layout - CodePen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <title>Responsive Product Cards | Pure CSS Grid | CodePen Ready</title>
  <!-- Google Fonts + simple reset -->
  <style>
    * 
      margin: 0;
      padding: 0;
      box-sizing: border-box;
body 
      background: linear-gradient(145deg, #f4f7fc 0%, #e9eef3 100%);
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
      padding: 2rem 1.5rem;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
/* main container */
    .shop-container 
      max-width: 1400px;
      width: 100%;
      margin: 0 auto;
/* header / intro */
    .gallery-header 
      text-align: center;
      margin-bottom: 2.8rem;
.gallery-header h1 
      font-size: 2.3rem;
      font-weight: 700;
      background: linear-gradient(135deg, #1a2a3a, #2c4c6c);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      letter-spacing: -0.3px;
.gallery-header p 
      color: #4a627a;
      margin-top: 0.6rem;
      font-size: 1.05rem;
      font-weight: 500;
      border-bottom: 2px solid rgba(44, 76, 108, 0.2);
      display: inline-block;
      padding-bottom: 0.4rem;
/* ---------- 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;
/* PRODUCT CARD - modern, smooth, interactive */
    .product-card 
      background: #ffffff;
      border-radius: 1.75rem;
      overflow: hidden;
      width: 100%;
      max-width: 360px;
      transition: transform 0.25s ease, box-shadow 0.35s ease;
      box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.02);
      display: flex;
      flex-direction: column;
      position: relative;
      backdrop-filter: blur(0px);
.product-card:hover 
      transform: translateY(-6px);
      box-shadow: 0 24px 36px -12px rgba(0, 0, 0, 0.2), 0 6px 18px rgba(0, 0, 0, 0.05);
/* image container - maintains ratio and responsiveness */
    .card-img 
      background-color: #f2f5f9;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.8rem 1.2rem 1rem 1.2rem;
      border-bottom: 1px solid #edf2f7;
      transition: background 0.2s;
.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);
.product-card:hover .card-img img 
      transform: scale(1.02);
/* badge / sale tag */
    .badge 
      position: absolute;
      top: 1rem;
      left: 1rem;
      background: #e11d48;
      color: white;
      font-size: 0.7rem;
      font-weight: 700;
      padding: 0.25rem 0.8rem;
      border-radius: 40px;
      letter-spacing: 0.3px;
      backdrop-filter: blur(2px);
      background-color: #e11d48;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      z-index: 2;
.badge.green 
      background: #0f7b3a;
/* card content */
    .card-content 
      padding: 1.4rem 1.3rem 1.6rem;
      flex: 1;
      display: flex;
      flex-direction: column;
.product-category 
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 600;
      color: #5e7a93;
      margin-bottom: 0.5rem;
.product-title 
      font-size: 1.35rem;
      font-weight: 700;
      line-height: 1.3;
      color: #1a2c3e;
      margin-bottom: 0.5rem;
.product-description 
      font-size: 0.85rem;
      color: #4b5e77;
      line-height: 1.45;
      margin-bottom: 1.2rem;
      flex: 1;
/* price area + rating */
    .price-rating 
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      flex-wrap: wrap;
      margin-bottom: 1.1rem;
.price 
      font-size: 1.6rem;
      font-weight: 800;
      color: #1e4a6e;
      letter-spacing: -0.5px;
.price small 
      font-size: 0.8rem;
      font-weight: 500;
      color: #5e7a93;
.old-price 
      font-size: 0.85rem;
      color: #94a3b8;
      text-decoration: line-through;
      margin-left: 0.5rem;
      font-weight: 500;
.rating 
      display: flex;
      align-items: center;
      gap: 0.3rem;
      background: #f8fafc;
      padding: 0.2rem 0.6rem;
      border-radius: 40px;
.stars 
      color: #f5b042;
      font-size: 0.75rem;
      letter-spacing: 1px;
.rating-value 
      font-size: 0.7rem;
      font-weight: 600;
      color: #334155;
/* 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);
.btn-card:hover 
      background: #0f2c48;
      transform: scale(0.98);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
.btn-card:active 
      transform: scale(0.96);
/* responsive behavior for very small devices */
    @media (max-width: 640px) 
      body 
        padding: 1.2rem;
.card-grid 
        gap: 1.3rem;
.product-title 
        font-size: 1.2rem;
.price 
        font-size: 1.4rem;
.gallery-header h1 
        font-size: 1.8rem;
/* optional micro-interaction for button feedback (just demo) */
    .btn-card i 
      font-style: normal;
      font-size: 1.1rem;
/* footer note */
    .demo-note 
      text-align: center;
      margin-top: 3rem;
      font-size: 0.75rem;
      color: #6c86a0;
      border-top: 1px solid rgba(0,0,0,0.05);
      padding-top: 1.5rem;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
</style>
</head>
<body>
<div class="shop-container">
  <div class="gallery-header">
    <h1>✨ responsive product cards</h1>
    <p>pure HTML / CSS — fluid grid · hover effects · modern design</p>
  </div>
<div class="card-grid">
    <!-- CARD 1 - classic sneaker -->
    <div class="product-card">
      <div class="card-img">
        <img src="https://cdn-icons-png.flaticon.com/512/2589/2589173.png" alt="modern sneaker" loading="lazy">
        <div class="badge">🔥 bestseller</div>
      </div>
      <div class="card-content">
        <div class="product-category">footwear</div>
        <h3 class="product-title">Aero Pulse Sneakers</h3>
        <p class="product-description">Breathable mesh, cloud foam sole. Perfect for daily runs and urban walking.</p>
        <div class="price-rating">
          <div class="price">$89 <small>USD</small></div>
          <div class="rating">
            <span class="stars">★★★★☆</span>
            <span class="rating-value">4.7</span>
          </div>
        </div>
        <button class="btn-card" aria-label="Add to cart">🛒 Add to cart</button>
      </div>
    </div>
<!-- CARD 2 - smartwatch with discount -->
    <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>
<!-- CARD 3 - minimal backpack -->
    <div class="product-card">
      <div class="card-img">
        <img src="https://cdn-icons-png.flaticon.com/512/4383/4383497.png" alt="modern backpack" loading="lazy">
      </div>
      <div class="card-content">
        <div class="product-category">accessories</div>
        <h3 class="product-title">Urbanite Backpack</h3>
        <p class="product-description">Water-resistant, padded laptop sleeve (15"), comfortable ergonomic straps.</p>
        <div class="price-rating">
          <div class="price">$64 <small>USD</small></div>
          <div class="rating">
            <span class="stars">★★★★☆</span>
            <span class="rating-value">4.5</span>
          </div>
        </div>
        <button class="btn-card" aria-label="Add to cart">🛒 Add to cart</button>
      </div>
    </div>
<!-- CARD 4 - wireless earbuds -->
    <div class="product-card">
      <div class="card-img">
        <img src="https://cdn-icons-png.flaticon.com/512/2970/2970240.png" alt="earbuds" loading="lazy">
        <div class="badge">new</div>
      </div>
      <div class="card-content">
        <div class="product-category">audio</div>
        <h3 class="product-title">AuraBuds Pro</h3>
        <p class="product-description">Active noise canceling, 30h battery, IPX4 sweat resistant, deep bass.</p>
        <div class="price-rating">
          <div class="price">$119 <small>USD</small></div>
          <div class="rating">
            <span class="stars">★★★★★</span>
            <span class="rating-value">5.0</span>
          </div>
        </div>
        <button class="btn-card" aria-label="Add to cart">🛒 Add to cart</button>
      </div>
    </div>
<!-- CARD 5 - casual hoodie -->
    <div class="product-card">
      <div class="card-img">
        <img src="https://cdn-icons-png.flaticon.com/512/2523/2523864.png" alt="hoodie" loading="lazy">
      </div>
      <div class="card-content">
        <div class="product-category">clothing</div>
        <h3 class="product-title">Cozy Fleece Hoodie</h3>
        <p class="product-description">Recycled cotton blend, relaxed fit, kangaroo pocket, premium organic dye.</p>
        <div class="price-rating">
          <div class="price">$49 <small>USD</small></div>
          <div class="rating">
            <span class="stars">★★★★☆</span>
            <span class="rating-value">4.6</span>
          </div>
        </div>
        <button class="btn-card" aria-label="Add to cart">🛒 Add to cart</button>
      </div>
    </div>
<!-- CARD 6 - ceramic coffee mug (eco) -->
    <div class="product-card">
      <div class="card-img">
        <img src="https://cdn-icons-png.flaticon.com/512/2598/2598269.png" alt="coffee mug" loading="lazy">
        <div class="badge green">eco</div>
      </div>
      <div class="card-content">
        <div class="product-category">kitchen</div>
        <h3 class="product-title">Artisan Ceramic Mug</h3>
        <p class="product-description">Handmade stoneware, 12oz, dishwasher safe, minimalist matte finish.</p>
        <div class="price-rating">
          <div class="price">$24 <small>USD</small></div>
          <div class="rating">
            <span class="stars">★★★★☆</span>
            <span class="rating-value">4.8</span>
          </div>
        </div>
        <button class="btn-card" aria-label="Add to cart">🛒 Add to cart</button>
      </div>
    </div>
  </div>
  <div class="demo-note">
    ⚡ Fully responsive grid — resizing browser automatically adapts columns. Pure CSS + hover animations. Ready for CodePen.
  </div>
</div>
<!-- tiny optional script: just to show interactive console feedback (non-intrusive) -->
<script>
  (function() 
    // simple interactive feedback for demonstration purposes - does not affect design
    const buttons = document.querySelectorAll('.btn-card');
    buttons.forEach(btn => 
      btn.addEventListener('click', (e) => );
    );
  )();
</script>
</body>
</html>

---