→ Anika
→ Product Grid for Ecommerce Website

Product Grid for Ecommerce Website

Premium product grid with hover animation

This Example is contributed by Anika, on 22-Feb-2025. It is responsive. similar terms for this example are Product Showcase, Product card

Product eCommerce

Author Anika

Fork Fullscreen

<header class="header">
  <h1>Featured Products</h1>
  <p style="color: rgba(255,255,255,0.7)">Discover our premium collection</p>
</header>

<div class="card-grid">
  
  <div class="card">
    <div class="card-image">
      <img src="https://images.unsplash.com/photo-1574494461754-de04dc403eec?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMnx8aGVhZHBob25lfGVufDB8MHx8fDE3NDAyMjk1Nzl8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Premium Headphones">
      <span class="tag new-badge">NEW</span>
      <span class="stock-status">In Stock</span>
    </div>
    <div class="content">
      <h2 class="title">Premium Headphones</h2>
      <div class="rating">
        <span class="star">★</span>
        <span class="star">★</span>
        <span class="star">★</span>
        <span class="star">★</span>
        <span class="star">★</span>
      </div>
      <p class="description">Experience crystal-clear sound with our latest wireless headphones featuring
        noise cancellation.</p>
      <div class="price">$299</div>
      <button class="button">Add to Cart</button>
    </div>
  </div>

<div class="card">
    <div class="card-image">
      <img src="https://images.unsplash.com/photo-1579586337278-3befd40fd17a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxzbWFydCUyMHdhdGNofGVufDB8MHx8fDE3NDAyMjk2MDB8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Smart Watch">
      <span class="tag">TRENDING</span>
      <span class="stock-status">Limited</span>
    </div>
    <div class="content">
      <h2 class="title">Smart Watch Pro</h2>
      <div class="rating">
        <span class="star">★</span>
        <span class="star">★</span>
        <span class="star">★</span>
        <span class="star">★</span>
        <span class="star">☆</span>
      </div>
      <p class="description">Track your fitness and stay connected with our latest smartwatch.</p>
      <div class="price">$199</div>
      <button class="button">Add to Cart</button>
    </div>
  </div>

<div class="card">
    <div class="card-image">
      <img src="https://images.unsplash.com/photo-1574920162043-b872873f19c8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMnx8ZWFyYnVkfGVufDB8MHx8fDE3NDAyMjk2MTR8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Wireless Earbuds">
      <span class="tag">SALE</span>
      <span class="stock-status">In Stock</span>
    </div>
    <div class="content">
      <h2 class="title">Wireless Earbuds</h2>
      <div class="rating">
        <span class="star">★</span>
        <span class="star">★</span>
        <span class="star">★</span>
        <span class="star">★</span>
        <span class="star">★</span>
      </div>
      <p class="description">True wireless earbuds with premium sound quality and long battery life.</p>
      <div class="price">$159</div>
      <button class="button">Add to Cart</button>
    </div>
  </div>
</div>

Related Examples