Responsive Product Card Html Css Codepen (2027)
We want our HTML to be semantic and clean. We will use a wrapper <div> to hold everything together. Inside, we’ll separate the visual elements (the image) from the informational elements (text and price).
<div class="product-card">
<div class="product-image">
<img src="https://via.placeholder.com/300x400" alt="Product Name">
</div>
<div class="product-info">
<span class="product-category">Footwear</span>
<h2 class="product-title">Classic Leather Sneakers</h2>
<p class="product-description">Premium quality leather with a rubber sole. Perfect for casual outings.</p>
<div class="product-price">
<span class="current-price">$89.99</span>
<span class="original-price">$129.99</span>
</div>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
Why this structure?
.grid-container display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; padding: 2rem; max-width: 1400px; margin: 0 auto;.card background: #ffffff; border-radius: 1rem; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); position: relative;
.card:hover box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
.card-badge position: absolute; top: 10px; left: 10px; background: #ef4444; color: white; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: bold; z-index: 10;
img width: 100%; height: 220px; object-fit: cover;
.card-content padding: 1.25rem;
/* Responsive typography */ h2 font-size: clamp(1.2rem, 4vw, 1.5rem); margin: 0 0 0.5rem 0;
/* CodePen specific: Make it look gorgeous */ body background: #f3f4f6; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
The magic line: grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)). This tells the browser: "Create as many columns as possible where each column is at least 280px wide, but if there is extra space, distribute it equally." No media queries required!
When you open CodePen to test these cards, use these pro tips:
for the name and a
for the story of the shoe. The Style: CSS
This is where the magic happened. Leo typed with a rhythm, his fingers dancing across the keys to define the CSS properties.
Glassmorphism: He applied a backdrop-filter: blur(10px) and a semi-transparent border, making the card look like it was carved from a frosted window.
Flexbox & Grid: He used display: flex to ensure the "Add to Cart" button stayed perfectly anchored, no matter how much text the user threw at it.
The "Responsive" Heart: He added a single, elegant media query. On a desktop, the card stood tall and wide.
On a mobile screen, the layout shifted fluidly, stacking the image and text with a grace that felt natural. The Reveal
Leo hit "Save." He grabbed the corner of his browser window and began to shrink it. The card didn't break; it danced. The fonts resized, the padding breathed, and the shadows softened.
He titled it "The Breathing Card" and hit "Public." Within minutes, the little heart icon on CodePen began to flicker—first one like, then ten, then a hundred. He had turned a simple product card into a masterclass in modern 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
Responsive Product Card: A Comprehensive Guide to HTML, CSS, and Codepen responsive product card html css codepen
Abstract
In the ever-evolving world of e-commerce, a well-designed product card is crucial for showcasing products and driving sales. A responsive product card is essential for providing an optimal user experience across various devices and screen sizes. This paper explores the concept of a responsive product card, its importance, and provides a detailed guide on creating one using HTML, CSS, and Codepen.
Introduction
A product card is a vital component of an e-commerce website, serving as a visual representation of a product. It typically includes essential information such as product images, descriptions, prices, and call-to-actions. With the majority of users accessing websites through mobile devices, it is imperative that product cards are optimized for responsiveness.
The Importance of Responsive Product Cards
A responsive product card ensures that the product information is presented in an aesthetically pleasing and user-friendly manner, regardless of the device or screen size. This is crucial for several reasons:
HTML Structure for a Responsive Product Card
The HTML structure for a responsive product card is relatively straightforward. The following code provides a basic example:
<div class="product-card">
<div class="product-image">
<img src="product-image.jpg" alt="Product Image">
</div>
<div class="product-info">
<h2>Product Title</h2>
<p>Product Description</p>
<span>$99.99</span>
<button>Add to Cart</button>
</div>
</div>
CSS Styling for a Responsive Product Card
To create a responsive product card, CSS is used to style and layout the HTML structure. The following code provides a basic example:
.product-card
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
.product-image
width: 100%;
height: 200px;
margin-bottom: 20px;
.product-image img
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px 10px 0 0;
.product-info
padding: 20px;
text-align: center;
.product-info h2
font-size: 18px;
margin-bottom: 10px;
.product-info p
font-size: 14px;
margin-bottom: 20px;
.product-info span
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
.product-info button
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
.product-info button:hover
background-color: #3e8e41;
Making the Product Card Responsive
To make the product card responsive, media queries can be used to adjust the layout and styling based on different screen sizes. The following code provides an example:
@media (max-width: 768px)
.product-card
flex-direction: row;
align-items: flex-start;
.product-image
width: 30%;
height: 150px;
.product-info
padding: 20px;
text-align: left;
@media (max-width: 480px)
.product-card
flex-direction: column;
align-items: center;
.product-image
width: 100%;
height: 200px;
.product-info
padding: 20px;
text-align: center;
Codepen Example
For a live example of a responsive product card, please visit the following Codepen link: https://codepen.io/pen/KyVejrq
Conclusion
In conclusion, a responsive product card is essential for providing an optimal user experience across various devices and screen sizes. By using HTML, CSS, and media queries, a responsive product card can be created to showcase products in an aesthetically pleasing and user-friendly manner. The Codepen example provided demonstrates a live example of a responsive product card.
Recommendations
Based on the findings of this paper, the following recommendations are made:
Future Research Directions
Future research directions may include:
<!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 HTML/CSS Grid</title>
<style>
/* ----- RESET & BASE ----- */
*
margin: 0;
padding: 0;
box-sizing: border-box;
body
background: linear-gradient(145deg, #f5f7fc 0%, #eef2f5 100%);
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
padding: 2rem 1.5rem;
min-height: 100vh;
/* main container */
.shop-container
max-width: 1400px;
margin: 0 auto;
/* header / section title */
.section-header
text-align: center;
margin-bottom: 3rem;
.section-header h1
font-size: 2.2rem;
font-weight: 700;
background: linear-gradient(135deg, #1a2a3a, #2c3e50);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
letter-spacing: -0.01em;
.section-header p
color: #5b6e8c;
margin-top: 0.6rem;
font-size: 1rem;
font-weight: 450;
/* ----- RESPONSIVE PRODUCT GRID (CSS Grid) ----- */
.product-grid
display: grid;
gap: 2rem;
/* MOBILE FIRST: 1 column */
grid-template-columns: 1fr;
/* tablet: 2 columns */
@media (min-width: 640px)
.product-grid
grid-template-columns: repeat(2, 1fr);
gap: 1.8rem;
/* desktop: 3 columns */
@media (min-width: 1024px)
.product-grid
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
/* large screens: 4 columns (optional but beautiful) */
@media (min-width: 1280px)
.product-grid
grid-template-columns: repeat(4, 1fr);
/* ----- PRODUCT CARD STYLES (glassmorphism + modern) ----- */
.product-card
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(0px);
border-radius: 28px;
overflow: hidden;
box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.02);
transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
display: flex;
flex-direction: column;
border: 1px solid rgba(255, 255, 255, 0.6);
/* subtle lift on hover */
.product-card:hover
transform: translateY(-6px);
box-shadow: 0 28px 40px -16px rgba(0, 0, 0, 0.2);
border-color: rgba(255, 255, 255, 0.9);
background: white;
/* image container - maintains ratio and responsive image */
.card-image
background-color: #f8fafc;
position: relative;
overflow: hidden;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
.card-image img
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.4s ease;
display: block;
.product-card:hover .card-image img
transform: scale(1.03);
/* badge (optional modern touch) */
.badge
position: absolute;
top: 1rem;
left: 1rem;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(6px);
color: white;
font-size: 0.7rem;
font-weight: 600;
padding: 0.25rem 0.8rem;
border-radius: 40px;
letter-spacing: 0.3px;
z-index: 2;
font-family: monospace;
/* card content */
.card-content
padding: 1.4rem 1.2rem 1.6rem;
flex: 1;
display: flex;
flex-direction: column;
.product-category
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 1.2px;
font-weight: 600;
color: #5f7f9e;
margin-bottom: 0.5rem;
.product-title
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
color: #1e2a3e;
margin-bottom: 0.5rem;
transition: color 0.2s;
.product-description
font-size: 0.85rem;
color: #4a5b72;
line-height: 1.45;
margin-bottom: 1.2rem;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
/* price & action row */
.price-row
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.8rem;
margin-top: auto;
.price
display: flex;
align-items: baseline;
gap: 0.4rem;
flex-wrap: wrap;
.current-price
font-size: 1.55rem;
font-weight: 800;
color: #1f3b4c;
letter-spacing: -0.3px;
.old-price
font-size: 0.8rem;
color: #8f9eb2;
text-decoration: line-through;
font-weight: 500;
.btn-add
background: #1e2f3f;
border: none;
padding: 0.5rem 1rem;
border-radius: 40px;
color: white;
font-weight: 600;
font-size: 0.75rem;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: inherit;
letter-spacing: 0.3px;
backdrop-filter: blur(2px);
.btn-add:hover
background: #0f212f;
transform: scale(0.97);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
/* simple rating stars (emojis / visual) */
.rating
margin-bottom: 0.7rem;
display: flex;
align-items: center;
gap: 5px;
.stars
color: #f5b342;
font-size: 0.75rem;
letter-spacing: 2px;
.reviews
font-size: 0.7rem;
color: #7c8ba0;
/* interactive "Added" simulation (just for codepen demonstration) */
.btn-add.added-effect
background: #2c6e49;
transition: 0.1s;
/* responsiveness inside card content */
@media (max-width: 480px)
.product-title
font-size: 1.1rem;
.current-price
font-size: 1.35rem;
.card-content
padding: 1rem;
/* subtle footer */
.demo-footer
text-align: center;
margin-top: 3.5rem;
font-size: 0.8rem;
color: #6a7f9b;
border-top: 1px solid rgba(0, 0, 0, 0.05);
padding-top: 2rem;
font-weight: 450;
.demo-footer a
color: #2c5a74;
text-decoration: none;
border-bottom: 1px dotted #abc0d0;
.demo-footer a:hover
color: #0d2e42;
</style>
</head>
<body>
<div class="shop-container">
<div class="section-header">
<h1>✨ responsive product grid</h1>
<p>Pure HTML / CSS — fluid cards, modern hover, 1 → 2 → 3 → 4 columns</p>
</div>
<div class="product-grid">
<!-- Product Card 1 -->
<div class="product-card">
<div class="card-image">
<div class="badge">best seller</div>
<img src="https://placehold.co/400x400/FFFFFF/cccccc?text=🎧+Wireless+Headphones"
alt="Wireless Headphones"
loading="lazy">
</div>
<div class="card-content">
<div class="product-category">Audio / Tech</div>
<div class="rating">
<span class="stars">★★★★★</span>
<span class="reviews">(142 reviews)</span>
</div>
<h3 class="product-title">Auric Bliss WH-1000</h3>
<p class="product-description">Noise cancellation, 40h battery, ultra-light design and deep bass. Perfect for travel & daily use.</p>
<div class="price-row">
<div class="price">
<span class="current-price">$89.99</span>
<span class="old-price">$149.99</span>
</div>
<button class="btn-add" data-product="Auric Bliss">+ Add to cart</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="product-card">
<div class="card-image">
<img src="https://placehold.co/400x400/F9F9F9/aaaaaa?text=⌚+Smart+Watch"
alt="Smart Watch"
loading="lazy">
</div>
<div class="card-content">
<div class="product-category">Wearables</div>
<div class="rating">
<span class="stars">★★★★☆</span>
<span class="reviews">(89 reviews)</span>
</div>
<h3 class="product-title">VitaTrack Pro 4</h3>
<p class="product-description">Blood oxygen, heart rate, sleep tracking & 10-day battery. AMOLED display, stylish and lightweight.</p>
<div class="price-row">
<div class="price">
<span class="current-price">$119.00</span>
<span class="old-price">$179.00</span>
</div>
<button class="btn-add" data-product="VitaTrack Pro">+ Add to cart</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="product-card">
<div class="card-image">
<div class="badge">new</div>
<img src="https://placehold.co/400x400/FFFFFF/d9d9d9?text=📷+Mirrorless+Cam"
alt="Mirrorless Camera"
loading="lazy">
</div>
<div class="card-content">
<div class="product-category">Photography</div>
<div class="rating">
<span class="stars">★★★★★</span>
<span class="reviews">(231 reviews)</span>
</div>
<h3 class="product-title">NeoMirror Z50</h3>
<p class="product-description">24.2MP, 4K video, eye-tracking AF, lightweight body — perfect for creators and vloggers.</p>
<div class="price-row">
<div class="price">
<span class="current-price">$699.00</span>
<span class="old-price">$849.00</span>
</div>
<button class="btn-add" data-product="NeoMirror Z50">+ Add to cart</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="product-card">
<div class="card-image">
<img src="https://placehold.co/400x400/F2F4F8/999999?text=💡+Smart+Bulb"
alt="Smart LED Bulb"
loading="lazy">
</div>
<div class="card-content">
<div class="product-category">Smart Home</div>
<div class="rating">
<span class="stars">★★★★☆</span>
<span class="reviews">(56 reviews)</span>
</div>
<h3 class="product-title">Lume RGB + WiFi</h3>
<p class="product-description">16 million colors, voice assistant compatible, energy efficient, schedule & dimming control.</p>
<div class="price-row">
<div class="price">
<span class="current-price">$24.99</span>
<span class="old-price">$39.99</span>
</div>
<button class="btn-add" data-product="Lume RGB">+ Add to cart</button>
</div>
</div>
</div>
<!-- Product Card 5 (extra for layout showcase) -->
<div class="product-card">
<div class="card-image">
<div class="badge">-20%</div>
<img src="https://placehold.co/400x400/FFFFFF/e2e8f0?text=🎒+Backpack"
alt="Laptop Backpack"
loading="lazy">
</div>
<div class="card-content">
<div class="product-category">Accessories</div>
<div class="rating">
<span class="stars">★★★★☆</span>
<span class="reviews">(104 reviews)</span>
</div>
<h3 class="product-title">Urban Nomad Pack</h3>
<p class="product-description">Water-resistant, 17" laptop compartment, USB charging port, anti-theft design.</p>
<div class="price-row">
<div class="price">
<span class="current-price">$54.50</span>
<span class="old-price">$68.00</span>
</div>
<button class="btn-add" data-product="Urban Nomad">+ Add to cart</button>
</div>
</div>
</div>
<!-- Product Card 6 -->
<div class="product-card">
<div class="card-image">
<img src="https://placehold.co/400x400/F8FAFE/bbc3cf?text=⌨️+Mechanical+KB"
alt="Mechanical Keyboard"
loading="lazy">
</div>
<div class="card-content">
<div class="product-category">Gaming / Tech</div>
<div class="rating">
<span class="stars">★★★★★</span>
<span class="reviews">(319 reviews)</span>
</div>
<h3 class="product-title">TypeMaster TKL RGB</h3>
<p class="product-description">Hot-swappable switches, programmable macros, double-shot PBT keycaps, compact layout.</p>
<div class="price-row">
<div class="price">
<span class="current-price">$79.99</span>
<span class="old-price">$119.99</span>
</div>
<button class="btn-add" data-product="TypeMaster TKL">+ Add to cart</button>
</div>
</div>
</div>
</div>
<div class="demo-footer">
🌟 Fully responsive product cards — CSS Grid + modern hover. Resize your window to see column adaptation.<br>
✨ Click "Add to cart" for interactive feedback (demo only) | <a href="#" id="resetDemo">reset messages</a>
</div>
</div>
<!-- tiny interactive demo: button click feedback with clean JS -->
<script>
(function()
// select all add-to-cart buttons
const buttons = document.querySelectorAll('.btn-add');
// store original text / state
const originalTexts = new Map();
// reset helper (clear all active effects)
function resetAllButtons()
buttons.forEach(btn =>
// clear any existing timeout to avoid race
if (btn._timeoutId)
clearTimeout(btn._timeoutId);
btn._timeoutId = null;
btn.classList.remove('added-effect');
const original = originalTexts.get(btn);
if (original)
btn.innerHTML = original;
else 'item';
btn.innerHTML = `+ Add to cart`;
btn.disabled = false;
);
// store original innerHTML for each button
buttons.forEach(btn =>
originalTexts.set(btn, btn.innerHTML);
btn.addEventListener('click', function(e) );
);
// reset demo link behaviour
const resetLink = document.getElementById('resetDemo');
if (resetLink)
resetLink.addEventListener('click', function(e)
e.preventDefault();
resetAllButtons();
console.log('🔄 Reset all product card buttons');
);
)();
</script>
</body>
</html>
Below is a complete, self-contained HTML/CSS block. Copy this directly into the HTML panel of CodePen.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Product Cards | CodePen Demo</title> <style> * margin: 0; padding: 0; box-sizing: border-box;body background: #e9eef3; font-family: 'Inter', system-ui, sans-serif; padding: 2rem; .container max-width: 1300px; margin: 0 auto; h1 font-size: 2rem; margin-bottom: 2rem; text-align: center; font-weight: 600; /* Responsive Product Grid */ .product-grid display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.8rem; .product-card background: white; border-radius: 20px; overflow: hidden; transition: all 0.25s ease-in-out; box-shadow: 0 5px 15px rgba(0,0,0,0.05); .product-card:hover transform: translateY(-8px); box-shadow: 0 20px 30px -12px rgba(0,0,0,0.15); .product-image width: 100%; height: 240px; object-fit: cover; background: #f0f2f5; .product-info padding: 1.2rem; .product-title font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #1e293b; .product-description color: #475569; font-size: 0.85rem; line-height: 1.4; margin-bottom: 1rem; .price-row display: flex; align-items: center; justify-content: space-between; margin-top: 0.5rem; .current-price font-size: 1.5rem; font-weight: 700; color: #0f172a; .btn background: #3b82f6; color: white; border: none; padding: 8px 16px; border-radius: 40px; font-weight: 600; cursor: pointer; transition: 0.2s; .btn:hover background: #2563eb; /* Mobile optimization */ @media (max-width: 640px) body padding: 1rem; .product-grid gap: 1rem; .btn padding: 10px 20px; /* Larger touch area */
</style> </head> <body> <div class="container"> <h1>🛍️ Best Sellers</h1> <div class="product-grid"> <!-- Card 1 --> <div class="product-card"> <img class="product-image" src="https://picsum.photos/id/26/400/300" alt="Camera" loading="lazy"> <div class="product-info"> <div class="product-title">Vintage Camera</div> <div class="product-description">Capture memories with 35mm film aesthetic.</div> <div class="price-row"> <span class="current-price">$149</span> <button class="btn">Buy Now</button> </div> </div> </div> <!-- Add 5 more similar cards for demo --> </div> </div> </body> </html>
A "Responsive Product Card" isn't just about shrinking things. It is about reflowing content. We want our HTML to be semantic and clean
Building a responsive product card HTML CSS CodePen demo is no longer a mystery. You have three distinct strategies:
The best CodePen examples combine visual polish (gradients, shadows, hover states) with structural integrity (flex/grid). As a final exercise, take the Grid example above and modify the minmax(280px, 1fr) value to minmax(200px, 1fr) to see how more columns appear on desktop.
Now, open CodePen, paste the final block, and start resizing your browser window. You’ve just mastered the art of the responsive product card. Happy coding!
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
The HTML uses a wrapper for the card, an image section, and a content area for details like the title, price, and CTA button. "card-img" "https://unsplash.com" "Red Nike Sneaker" "card-content" "category" >Running ShoesNike Air Max
>Ultimate comfort and performance for every runner, featuring breathable mesh and responsive cushioning.Add to Cart.card width: ; background: #fff; border-radius: ; overflow: hidden; box-shadow: ); transition: transform ease;
.card:hover transform: translateY( );
.card-img img width: ; height: ; object-fit: cover;
.card-content padding: ;
.category font-size: ; color: var(--text-dark);
p font-size: ; color: #57606f; line-height: ;
.price font-size: ; border-radius: ; cursor: pointer; transition: background ;
.btn:hover background: #ff6b81; /* Responsive adjustment for small screens */ (max-width: ) { .card { width: Use code with caution. Copied to clipboard How to Use This on CodePen CodePen.io snippet into the HTML editor. snippet into the CSS editor.
The preview will automatically update, showing a responsive, interactive product card. JavaScript feature
, such as a "Quick View" modal or a dynamic heart/wishlist button? GeeksforGeeks Why this structure
How to Create Responsive Card Slider in HTML CSS & JavaScript
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
Creating a responsive product card for an e-commerce project involves structuring the HTML for semantics and using CSS Flexbox or Grid for adaptability. CodePen is a great platform to experiment with these designs, offering numerous community examples for inspiration. Core Structure (HTML)
A clean product card typically includes a container for the image, a details section for titles and pricing, and a call-to-action button.
Container: Use a
.card to hold everything.
Image Box: Wrap the
.imgBx) to control aspect ratios and hover effects.
Content: Group the product name, description, and price together.
Interaction: Include buttons for "Add to Cart" or "Wishlist". Styling & Responsiveness (CSS)
To make the card responsive, focus on flexible widths and layout adjustments for different screen sizes.
Sizing: Set width: min-content; or a fixed max-width (e.g., 300px) so cards don't overflow on small screens.
Visual Polish: Apply border-radius, box-shadow, and hover:scale-105 transitions for a modern, interactive feel.
Media Queries: Use media queries to change the number of columns in your grid (e.g., 1 column for mobile, 3 for desktop). Top Community Examples on CodePen
You can find pre-built templates by searching for responsive card tags. Here are notable examples:
Minimalist Design: A clean, shadow-based Responsive Product Card using Montserrat fonts.
Animated UI: The Responsive & Animated Product Card features interactive color and size selectors using JavaScript.
Tailwind Grid: A Responsive Product Card Grid built with Tailwind CSS, showcasing a multi-column layout.
Bootstrap 5: The E-commerce Product Card v.2 provides a framework-ready solution. Responsive Product Card - CSS Only - 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) =>
e.preventDefault();
const card = btn.closest('.product-card');
const title = card?.querySelector('.product-title')?.innerText );
);
)();
</script>
</body>
</html>
<div class="products-grid">
<div class="product-card">
<img src="https://via.placeholder.com/300x200" alt="Product">
<h3>Classic White Sneakers</h3>
<p class="price">$49.99</p>
<button>Add to Cart</button>
</div>
<!-- Repeat cards -->
</div>