Products
Ready-to-use Shop product blocks and components.
Product #1 #
<div class="py-6">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4 mb-5">
<div class="product card border-0 rounded-0 p-0">
<div class="position-relative h-100">
<a href="../shop-single-product.html">
<img src="../images/shop/product-1.jpg" alt="Product 1"
class="card-img-top">
</a>
<div class="image-content position-absolute">
<span class="badge badge-primary lh-11">Sale</span>
</div>
</div>
<div class="card-body text-center position-relative">
<a href="../shop-single-product.html"
class="link-hover-secondary-primary font-size-md mb-1">Black
Printed
T-Shirt</a>
<div class="product-meta-wrapper position-relative">
<div class="product-meta position-absolute">
<div class="author-rate d-flex justify-content-center">
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
</div>
<div class="font-size-md">
<span class="text-danger">$35.00</span>
<span class="text-dark text-decoration-line-through">$47.50</span>
</div>
</div>
<div class="add-to-cart position-absolute w-100">
<a href="#"
class="link-hover-dark-primary font-weight-semibold text-uppercase">Add
to
cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5">
<div class="product card border-0 rounded-0 p-0">
<div class="position-relative h-100">
<a href="../shop-single-product.html">
<img src="../images/shop/product-2.jpg" alt="Product 2"
class="card-img-top">
</a>
<div class="image-content position-absolute">
<span class="badge badge-success lh-11">New</span>
</div>
</div>
<div class="card-body text-center position-relative">
<a href="../shop-single-product.html"
class="link-hover-secondary-primary font-size-md mb-1">White
Retro
Sneaker</a>
<div class="product-meta-wrapper position-relative">
<div class="product-meta position-absolute">
<div class="author-rate d-flex justify-content-center">
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
</div>
<div class="font-size-md">
<span class="text-danger">$35.00</span>
<span class="text-decoration-line-through text-dark">$47.50</span>
</div>
</div>
<div class="add-to-cart position-absolute w-100">
<a href="#"
class="link-hover-dark-primary font-weight-semibold text-uppercase">
Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5">
<div class="product card border-0 rounded-0 p-0">
<div class="position-relative h-100">
<a href="../shop-single-product.html">
<img src="../images/shop/product-3.jpg" alt="Product 3"
class="card-img-top">
</a>
</div>
<div class="card-body text-center position-relative">
<a href="../shop-single-product.html"
class="link-hover-secondary-primary font-size-md mb-1">Herschuply
Snapback</a>
<div class="product-meta-wrapper position-relative">
<div class="product-meta position-absolute">
<div class="author-rate d-flex justify-content-center">
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
</div>
<div class="font-size-md">
<span class="text-dark">$25.00</span>
</div>
</div>
<div class="add-to-cart position-absolute w-100">
<a href="#"
class="link-hover-dark-primary font-weight-semibold text-uppercase">Add
to
cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>