Browse docs
HTML
CSS
Content
source-code.html
<div class="container my-5">
<div class="row g-4 justify-content-center">
<div class="col-12 col-md-4 col-lg-4">
<div class="product-card">
<div class="product-img-wrapper">
<img src="https://images.unsplash.com/photo-1594938298603-c8148c4dae35?q=80&w=600" alt="Linen Suit" class="product-img">
</div>
<div class="product-info">
<div class="product-price">$1,300</div>
<h2 class="product-title">Breeze Fit Suit</h2>
<div class="product-rating">
<span class="stars">
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star text-warning"></i>
</span>
<span class="rating-text">4.5 (75 Reviews)</span>
</div>
<p class="product-description">Sophisticated Design with Clean Lines and Structure.</p>
<div class="product-size-section">
<span class="size-label d-block">Size</span>
<div class="d-flex gap-2 mt-2">
<button class="btn-size disabled" disabled>xs</button>
<button class="btn-size active">s</button>
<button class="btn-size">m</button>
<button class="btn-size">l</button>
</div>
</div>
<div class="product-actions">
<button class="btn-add-cart">ADD TO CART</button>
<button class="btn-wishlist"><i class="bi bi-heart"></i></button>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-4">
<div class="product-card">
<div class="product-img-wrapper">
<img src="https://images.unsplash.com/photo-1593030103066-0093718efeb9?q=80&w=600" alt="Tweed Suit" class="product-img">
</div>
<div class="product-info">
<div class="product-price">$6,200</div>
<h2 class="product-title">Elite Formal Collection</h2>
<div class="product-rating">
<span class="stars">
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star text-warning"></i>
</span>
<span class="rating-text">4.9 (28 Reviews)</span>
</div>
<p class="product-description">Sophisticated Design with Clean Lines and Structure.</p>
<div class="product-size-section">
<span class="size-label d-block">Size</span>
<div class="d-flex gap-2 mt-2">
<button class="btn-size disabled" disabled>xs</button>
<button class="btn-size active">s</button>
<button class="btn-size">m</button>
<button class="btn-size">l</button>
</div>
</div>
<div class="product-actions">
<button class="btn-add-cart">ADD TO CART</button>
<button class="btn-wishlist"><i class="bi bi-heart"></i></button>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-4">
<div class="product-card">
<div class="product-img-wrapper">
<img src="https://images.unsplash.com/photo-1593030103066-0093718efeb9?q=80&w=600" alt="Premium Suit" class="product-img">
</div>
<div class="product-info">
<div class="product-price">$5,400</div>
<h2 class="product-title">Royal Tweed Edition</h2>
<div class="product-rating">
<span class="stars">
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star text-warning"></i>
</span>
<span class="rating-text">4.8 (836 Reviews)</span>
</div>
<p class="product-description">Sophisticated Design with Clean Lines and Structure.</p>
<div class="product-size-section">
<span class="size-label d-block">Size</span>
<div class="d-flex gap-2 mt-2">
<button class="btn-size disabled" disabled>xs</button>
<button class="btn-size active">s</button>
<button class="btn-size">m</button>
<button class="btn-size">l</button>
</div>
</div>
<div class="product-actions">
<button class="btn-add-cart">ADD TO CART</button>
<button class="btn-wishlist"><i class="bi bi-heart"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
User Reviews
0.0
0 reviews
5 stars
0
4 stars
0
3 stars
0
2 stars
0
1 stars
0
Be the first to review this component.