Ready-to-use Shop product blocks and components.
<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>
