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>