Clients - Snippets | Front - Multipurpose Responsive Template

Component #1

Preview
HTML

Who partners with Front?

Thousands of companies, including platforms, and plugin builders work with Front.

              
                <!-- Clients -->
                <div class="container content-space-2 content-space-lg-3">
                  <div class="row">
                    <div class="col-md-4 pt-7 pt-md-0">
                      <!-- Card -->
                      <div class="card bg-primary shadow-lg mt-md-n10" data-aos="fade-up">
                        <div class="card-body">
                          <div class="mb-7">
                            <span class="card-subtitle text-warning">Who partners with Front?</span>
                            <h2 class="card-title text-white">Thousands of companies, including platforms, and plugin builders work with Front.</h2>
                          </div>
                          <div class="d-grid">
                            <a class="btn btn-soft-light btn-transition" href="#">View more</a>
                          </div>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-md-8 pt-7">
                      <div class="row">
                        <div class="col-4 py-3">
                          <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/amazon-gray.svg" alt="Logo">
                        </div>
                        <!-- End Col -->

                        <div class="col-4 py-3">
                          <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/kaplan-gray.svg" alt="Logo">
                        </div>
                        <!-- End Col -->

                        <div class="col-4 py-3">
                          <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/embark-gray.svg" alt="Logo">
                        </div>
                        <!-- End Col -->

                        <div class="col-4 py-3">
                          <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/google-gray.svg" alt="Logo">
                        </div>
                        <!-- End Col -->

                        <div class="col-4 py-3">
                          <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/airbnb-gray.svg" alt="Logo">
                        </div>
                        <!-- End Col -->

                        <div class="col-4 py-3">
                          <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/shopify-gray.svg" alt="Logo">
                        </div>
                        <!-- End Col -->

                        <div class="col-4 py-3">
                          <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/vidados-gray.svg" alt="Logo">
                        </div>
                        <!-- End Col -->

                        <div class="col-4 py-3">
                          <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/capsule-gray.svg" alt="Logo">
                        </div>
                        <!-- End Col -->

                        <div class="col-4 py-3">
                          <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/forbes-gray.svg" alt="Logo">
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Clients -->

Component #2

Preview
HTML

Trusted by Open Source, enterprise, and more than 33,000 of you

              
                <!-- Clients -->
                <div class="container content-space-2 content-space-b-lg-3">
                  <!-- Heading -->
                  <div class="w-md-75 w-lg-50 text-center mx-md-auto mb-6">
                    <h2>Trusted by Open Source, enterprise, and more than 33,000 of you</h2>
                  </div>
                  <!-- End Heading -->

                  <div class="row justify-content-center text-center">
                    <div class="col-4 col-sm-3 col-md-2 py-3">
                      <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/amazon-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col-4 col-sm-3 col-md-2 py-3">
                      <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/kaplan-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col-4 col-sm-3 col-md-2 py-3">
                      <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/google-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col-4 col-sm-3 col-md-2 py-3">
                      <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/airbnb-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col-4 col-sm-3 col-md-2 py-3">
                      <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/shopify-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col-4 col-sm-3 col-md-2 py-3">
                      <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/vidados-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col-4 col-sm-3 col-md-2 py-3">
                      <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/capsule-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col-4 col-sm-3 col-md-2 py-3">
                      <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/forbes-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col-4 col-sm-3 col-md-2 py-3">
                      <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/business-insider-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col-4 col-sm-3 col-md-2 py-3">
                      <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/hubspot-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col-4 col-sm-3 col-md-2 py-3">
                      <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/layar-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Clients -->

Component #3

Preview
HTML

The complete theme for internet business

Millions of the world's most innovative technology companies are scaling faster and more efficiently by building their businesses on Front.

Discover how businesses use Front

              
                <!-- Clients -->
                <div class="position-relative overflow-hidden content-space-t-2">
                  <div class="position-absolute top-50 start-50 translate-middle w-100">
                    <div class="container-fluid px-lg-6">
                      <div class="row justify-content-center">
                        <div class="col-3 my-4">
                          <div class="d-none d-md-block avatar avatar-xl rounded-circle shadow-sm p-4 mx-auto">
                            <img class="avatar-img" src="../assets/svg/brands/google-icon.svg" alt="Logo">
                          </div>
                        </div>
                        <!-- End Col -->
                        
                        <div class="col-3 mb-4">
                          <div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 mx-auto">
                            <img class="avatar-img" src="../assets/svg/brands/atlassian-icon.svg" alt="Logo">
                          </div>
                        </div>
                        <!-- End Col -->
                        
                        <div class="col-3 my-4">
                          <div class="d-none d-md-block avatar avatar-xl rounded-circle shadow-sm p-4 mx-auto">
                            <img class="avatar-img" src="../assets/svg/brands/asana-icon.svg" alt="Logo">
                          </div>
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->

                      <div class="row justify-content-between">
                        <div class="col-3 mb-4">
                          <div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4">
                            <img class="avatar-img" src="../assets/svg/brands/slack-icon.svg" alt="Logo">
                          </div>
                        </div>
                        <!-- End Col -->
                        
                        <div class="col-3 my-4">
                          <div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 ms-auto">
                            <img class="avatar-img" src="../assets/svg/brands/spotify-icon.svg" alt="Logo">
                          </div>
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->

                      <div class="row">
                        <div class="col-3 offset-1 my-4">
                          <div class="d-none d-md-block avatar avatar-xl rounded-circle shadow-sm p-4 ms-auto">
                            <img class="avatar-img" src="../assets/svg/brands/paypal-icon.svg" alt="Logo">
                          </div>
                        </div>
                        <!-- End Col -->
                        
                        <div class="col-3 offset-2 my-4">
                          <div class="d-none d-md-block avatar avatar-xl rounded-circle shadow-sm p-4 ms-auto">
                            <img class="avatar-img" src="../assets/svg/brands/dropbox-icon.svg" alt="Logo">
                          </div>
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->

                      <div class="row justify-content-between">
                        <div class="col-4">
                          <div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 mx-auto">
                            <img class="avatar-img" src="../assets/svg/brands/airbnb-icon.svg" alt="Logo">
                          </div>
                        </div>
                        <!-- End Col -->
                        
                        <div class="col-4 mt-6">
                          <div class="d-none d-sm-block avatar avatar-xl rounded-circle shadow-sm p-4 mx-auto">
                            <img class="avatar-img" src="../assets/svg/brands/behance-icon.svg" alt="Logo">
                          </div>
                        </div>
                        <!-- End Col -->
                        
                        <div class="col-4 mt-6">
                          <div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 mx-auto">
                            <img class="avatar-img" src="../assets/svg/brands/dribbble-icon.svg" alt="Logo">
                          </div>
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </div>
                  </div>

                  <div class="container position-relative zi-1 content-space-3 content-space-sm-4">
                    <!-- Heading -->
                    <div class="w-md-75 w-lg-50 text-center mx-md-auto">
                      <h2 class="h1">The complete theme for internet business</h2>
                      <p>Millions of the world's most innovative technology companies are scaling faster and more efficiently by building their businesses on Front.</p>
                      <a class="link" href="#">Discover how businesses use Front <i class="bi-chevron-right small ms-1"></i></a>
                    </div>
                    <!-- End Heading -->
                  </div>

                  <div class="gradient-y-lg-white position-absolute top-0 start-0 w-100 h-100"></div>
                </div>
                <!-- End Clients -->

Component #4

              
                <!-- Clients -->
                <div class="container content-space-2 content-space-lg-3">
                  <!-- Swiper Slider -->
                  <div class="js-swiper-clients swiper text-center">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/fitbit-dark.svg" alt="Logo">
                      </div>
                      <!-- End Slide -->

                      <div class="swiper-slide">
                        <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/forbes-dark.svg" alt="Logo">
                      </div>
                      <!-- End Slide -->

                      <div class="swiper-slide">
                        <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/mailchimp-dark.svg" alt="Logo">
                      </div>
                      <!-- End Slide -->

                      <div class="swiper-slide">
                        <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/layar-dark.svg" alt="Logo">
                      </div>
                      <!-- End Slide -->

                      <div class="swiper-slide">
                        <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/hubspot-dark.svg" alt="Logo">
                      </div>
                      <!-- End Slide -->
                    </div>
                  </div>
                  <!-- End Swiper Slider -->
                </div>
                <!-- End Clients -->

              
                <link rel="stylesheet" href="../node_modules/swiper/swiper-bundle.min.css">

              
                <!-- JS Implementing Plugins -->
                <script src="../node_modules/swiper/swiper-bundle.min.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var swiper = new Swiper('.js-swiper-clients',{
                      slidesPerView: 2,
                      breakpoints: {
                        380: {
                          slidesPerView: 3,
                          spaceBetween: 15,
                        },
                        768: {
                          slidesPerView: 4,
                          spaceBetween: 15,
                        },
                        1024: {
                          slidesPerView: 5,
                          spaceBetween: 15,
                        },
                      },
                    });
                  })()
                </script>

99.9%

Believe basic computer skills are all you need to plan projects with Front Pay.

              
                <!-- Clients -->
                <div class="container">
                  <div class="row align-items-lg-center">
                    <div class="col-md-7 col-lg-8 mb-5 mb-md-0">
                      <div class="row">
                        <div class="col text-center py-3">
                          <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/capsule-dark.svg" alt="Logo">
                        </div>
                        <!-- End Col -->

                        <div class="col text-center py-3">
                          <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/fitbit-dark.svg" alt="Logo">
                        </div>
                        <!-- End Col -->

                        <div class="col text-center py-3">
                          <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/forbes-dark.svg" alt="Logo">
                        </div>
                        <!-- End Col -->

                        <div class="col text-center py-3">
                          <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/mailchimp-dark.svg" alt="Logo">
                        </div>
                        <!-- End Col -->

                        <div class="col text-center py-3">
                          <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/airbnb-dark.svg" alt="Logo">
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </div>

                    <div class="col-md-5 col-lg-4">
                      <div class="ps-md-4">
                        <h2 class="display-3 text-primary">99.9%</h2>
                        <p>Believe basic computer skills are all you need to plan projects with Front Pay.</p>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Clients -->

Component #6

Preview
HTML

              
                <!-- Clients -->
                <div class="container content-space-2">
                  <div class="row">
                    <div class="col text-center py-3">
                      <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/hollister-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col text-center py-3">
                      <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/levis-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col text-center py-3">
                      <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/new-balance-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col text-center py-3">
                      <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/puma-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col text-center py-3">
                      <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/nike-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col text-center py-3">
                      <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/tnf-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Clients -->