Products

Ready-to-use Shop product blocks and components.

Products #1

              
                <!-- Products Section -->
                <div class="container space-2 space-3--lg">
                  <div class="row">
                    <div class="col-sm-6 col-lg-3 mb-5">
                      <!-- Shop Item -->
                      <a class="d-block border text-dark text-center" href="../html/shop/single-product.html">
                        <img class="img-fluid" src="../assets/img/500x550/img15.jpg" alt="Image Description">
                        <div class="border-top p-4">
                          <h2 class="h5">Longline t-shirt</h2>
                          <span class="d-block h5 text-primary mb-0">$21</span>
                        </div>
                      </a>
                      <!-- End Shop Item -->
                    </div>

                    <div class="col-sm-6 col-lg-3 mb-5">
                      <!-- Shop Item -->
                      <a class="d-block border text-dark text-center" href="../html/shop/single-product.html">
                        <img class="img-fluid" src="../assets/img/500x550/img16.jpg" alt="Image Description">
                        <div class="border-top p-4">
                          <h3 class="h5">Slip on shoes</h3>
                          <span class="d-block h5 text-primary mb-0">$99</span>
                        </div>
                      </a>
                      <!-- End Shop Item -->
                    </div>

                    <div class="col-sm-6 col-lg-3 mb-5">
                      <!-- Shop Item -->
                      <a class="d-block border text-dark text-center" href="../html/shop/single-product.html">
                        <img class="img-fluid" src="../assets/img/500x550/img17.jpg" alt="Image Description">
                        <div class="border-top p-4">
                          <h3 class="h5">Women's t-shirt</h3>
                          <span class="d-block h5 text-primary mb-0">$7</span>
                        </div>
                      </a>
                      <!-- End Shop Item -->
                    </div>

                    <div class="col-sm-6 col-lg-3 mb-5">
                      <!-- Shop Item -->
                      <a class="d-block border text-dark text-center" href="../html/shop/single-product.html">
                        <img class="img-fluid" src="../assets/img/500x550/img18.jpg" alt="Image Description">
                        <div class="border-top p-4">
                          <h3 class="h5">Hoodie</h3>
                          <span class="d-block h5 text-primary mb-0">$67</span>
                        </div>
                      </a>
                      <!-- End Shop Item -->
                    </div>

                    <div class="w-100"></div>

                    <div class="col-sm-6 col-lg-3 mb-5 mb-lg-0">
                      <!-- Shop Item -->
                      <a class="d-block border text-dark text-center" href="../html/shop/single-product.html">
                        <img class="img-fluid" src="../assets/img/500x550/img19.jpg" alt="Image Description">
                        <div class="border-top p-4">
                          <h2 class="h5">Snapback cap</h2>
                          <span class="d-block h5 text-primary mb-0">$25</span>
                        </div>
                      </a>
                      <!-- End Shop Item -->
                    </div>

                    <div class="col-sm-6 col-lg-3 mb-5 mb-lg-0">
                      <!-- Shop Item -->
                      <a class="d-block border text-dark text-center" href="../html/shop/single-product.html">
                        <img class="img-fluid" src="../assets/img/500x550/img20.jpg" alt="Image Description">
                        <div class="border-top p-4">
                          <h3 class="h5">Men's t-shirt</h3>
                          <span class="d-block h5 text-primary mb-0">$7</span>
                        </div>
                      </a>
                      <!-- End Shop Item -->
                    </div>

                    <div class="col-sm-6 col-lg-3 mb-5 mb-lg-0">
                      <!-- Shop Item -->
                      <a class="d-block border text-dark text-center" href="../html/shop/single-product.html">
                        <img class="img-fluid" src="../assets/img/500x550/img21.jpg" alt="Image Description">
                        <div class="border-top p-4">
                          <h3 class="h5">Pillow</h3>
                          <span class="d-block h5 text-primary mb-0">$19</span>
                        </div>
                      </a>
                      <!-- End Shop Item -->
                    </div>

                    <div class="col-sm-6 col-lg-3">
                      <!-- Shop Item -->
                      <a class="d-block border text-dark text-center" href="../html/shop/single-product.html">
                        <img class="img-fluid" src="../assets/img/500x550/img22.jpg" alt="Image Description">
                        <div class="border-top p-4">
                          <h3 class="h5">Glasses case</h3>
                          <span class="d-block h5 text-primary mb-0">$34</span>
                        </div>
                      </a>
                      <!-- End Shop Item -->
                    </div>
                  </div>
                </div>
                <!-- End Products Section -->
              
            

Products #2

Space hats

Experience a legend

Show Now

Space collection

You favorite color

Show Now

HTML:

              
                <!-- Products Section -->
                <div class="container space-2 space-3--lg">
                  <div class="card-deck d-block d-lg-flex">
                    <article class="card border-0 mb-5 mb-lg-0">
                      <!-- Category -->
                      <div class="card-body row align-items-stretch no-gutters p-0">
                        <div class="col-6 border border-right-0">
                          <div class="space-2 px-3 px-sm-5">
                            <div class="mb-4">
                              <h3 class="h4">Space hats</h3>
                              <p class="mb-0">Experience a legend</p>
                            </div>
                            <a href="#">Show Now</a>
                          </div>
                        </div>
                        <div class="col-6 border border-left-0 bg-img-hero-center" data-bg-img-src="../assets/img/500x550/img13.jpg"></div>
                      </div>
                      <!-- End Category -->
                    </article>

                    <article class="card border-0 mb-5 mb-lg-0">
                      <!-- Category -->
                      <div class="card-body row align-items-stretch no-gutters p-0">
                        <div class="col-6 border border-right-0">
                          <div class="space-2 px-3 px-sm-5">
                            <div class="mb-4">
                              <h3 class="h4">Space collection</h3>
                              <p class="mb-0">You favorite color</p>
                            </div>
                            <a href="#">Show Now</a>
                          </div>
                        </div>
                        <div class="col-6 border border-left-0 bg-img-hero" data-bg-img-src="../assets/img/500x550/img14.jpg"></div>
                      </div>
                      <!-- End Category -->
                    </article>
                  </div>
                </div>
                <!-- End Products Section -->