Clients

Component #1

Who partners with Front?

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

View More
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description 
<!-- Clients Section -->
<div class="container space-2">
  <div class="row">
    <div class="col-lg-4 pt-7 pt-lg-0">
      <!-- Card -->
      <div class="card bg-primary shadow-primary-lg mt-lg-n11 p-4 p-lg-7">
        <div class="text-white mb-7">
          <span class="d-block small text-warning font-weight-bold text-cap mb-2">Who partners with Front?</span>
          <h2 class="font-size-2 text-white">Thousands of companies, including platforms, and plugin builders work with Front.</h2>
        </div>
        <a class="btn btn-block btn-light transition-3d-hover" href="#">View More</a>
      </div>
      <!-- End Card -->
    </div>

    <div class="col-lg-8 pt-7">
      <!-- Logos -->
      <div class="row text-center">
        <div class="col-4 py-4">
          <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/alphabet.svg" alt="Image Description">
        </div>
        <div class="col-4 py-4">
          <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/kaplan.svg" alt="Image Description">
        </div>
        <div class="col-4 py-4">
          <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/slack.svg" alt="Image Description">
        </div>
        <div class="col-4 py-4">
          <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/google.svg" alt="Image Description">
        </div>
        <div class="col-4 py-4">
          <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/fitbit.svg" alt="Image Description">
        </div>
        <div class="col-4 py-4">
          <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/weebly.svg" alt="Image Description">
        </div>
        <div class="col-4 py-4">
          <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/mapbox.svg" alt="Image Description">
        </div>
        <div class="col-4 py-4">
          <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/uber.svg" alt="Image Description">
        </div>
        <div class="col-4 py-4">
          <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/airbnb.svg" alt="Image Description">
        </div>
      </div>
      <!-- End Logos -->
    </div>
  </div>
</div>
<!-- End Clients Section -->
Copy

Component #2

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

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description 
<!-- Clients Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="w-md-80 w-lg-60 text-center mx-md-auto mb-6">
    <h2>Trusted by Open Source, enterprise, and more than 33,000 of you</h2>
  </div>
  <!-- End Title -->

  <!-- Clients -->
  <div class="row justify-content-sm-center text-center">
    <div class="col-4 col-sm-2 mb-7">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/slack.svg" alt="Image Description">
    </div>
    <div class="col-4 col-sm-2 mb-7">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/stripe.svg" alt="Image Description">
    </div>
    <div class="col-4 col-sm-2 mb-7">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/airbnb.svg" alt="Image Description">
    </div>
    <div class="col-4 col-sm-2 mb-7">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/weebly.svg" alt="Image Description">
    </div>
    <div class="col-4 col-sm-2 mb-7">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/spotify.svg" alt="Image Description">
    </div>
    <div class="col-4 col-sm-2 mb-7">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/uber.svg" alt="Image Description">
    </div>
    <div class="d-none d-sm-block w-100"></div>
    <div class="col-4 col-sm-2 mb-7 mb-sm-0">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/shopify.svg" alt="Image Description">
    </div>
    <div class="col-4 col-sm-2 mb-7 mb-sm-0">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/fitbit.svg" alt="Image Description">
    </div>
    <div class="col-4 col-sm-2 mb-7 mb-sm-0">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/hubspot.svg" alt="Image Description">
    </div>
    <div class="col-4 col-sm-2">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/kaplan.svg" alt="Image Description">
    </div>
    <div class="col-4 col-sm-2">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/paypal.svg" alt="Image Description">
    </div>
  </div>
  <!-- End Clients -->
</div>
<!-- End Clients Section -->
Copy

Component #3

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description

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 
<!-- Works Section -->
<div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll bg-white" data-options='{direction: "reverse"}'>
  <div class="dzsparallaxer--target">
    <div class="container-fluid px-lg-6">
      <div class="row justify-content-center">
        <div class="col-3 my-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"15", mid:"0", final:"-15"}]'>
          <!-- Logo -->
          <div class="d-none d-md-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 mx-auto">
            <img class="avatar-img" src="../../assets/img/160x160/img17.png" alt="Image Description">
          </div>
          <!-- End Logo -->
        </div>
        <div class="col-3 mb-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"5", mid:"0", final:"-5"}]'>
          <!-- Logo -->
          <div class="d-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 mx-auto">
            <img class="avatar-img" src="../../assets/img/160x160/img12.png" alt="Image Description">
          </div>
          <!-- End Logo -->
        </div>
        <div class="col-3 my-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"11", mid:"0", final:"-11"}]'>
          <!-- Logo -->
          <div class="d-none d-md-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 mx-auto">
            <img class="avatar-img" src="../../assets/img/160x160/img13.png" alt="Image Description">
          </div>
          <!-- End Logo -->
        </div>
      </div>

      <div class="row justify-content-between">
        <div class="col-3 mb-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"7", mid:"0", final:"-7"}]'>
          <!-- Logo -->
          <div class="d-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4">
            <img class="avatar-img" src="../../assets/img/160x160/img14.png" alt="Image Description">
          </div>
          <!-- End Logo -->
        </div>
        <div class="col-3 my-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"7", mid:"0", final:"-7"}]'>
          <!-- Logo -->
          <div class="d-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 ml-auto">
            <img class="avatar-img" src="../../assets/img/160x160/img15.png" alt="Image Description">
          </div>
          <!-- End Logo -->
        </div>
      </div>

      <div class="row">
        <div class="col-3 offset-1 my-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"15", mid:"0", final:"-15"}]'>
          <!-- Logo -->
          <div class="d-none d-md-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 ml-auto">
            <img class="avatar-img" src="../../assets/img/160x160/img8.jpg" alt="Image Description">
          </div>
          <!-- End Logo -->
        </div>
        <div class="col-3 offset-2 my-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"11", mid:"0", final:"-11"}]'>
          <!-- Logo -->
          <div class="d-none d-md-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 ml-auto">
            <img class="avatar-img" src="../../assets/img/160x160/img6.jpg" alt="Image Description">
          </div>
          <!-- End Logo -->
        </div>
      </div>

      <div class="row justify-content-between">
        <div class="col-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"11", mid:"0", final:"-11"}]'>
          <!-- Logo -->
          <div class="d-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 mx-auto">
            <img class="avatar-img" src="../../assets/img/160x160/img16.png" alt="Image Description">
          </div>
          <!-- End Logo -->
        </div>
        <div class="col-4 mt-6" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"5", mid:"0", final:"-5"}]'>
          <!-- Logo -->
          <div class="d-none d-sm-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 mx-auto">
            <img class="avatar-img" src="../../assets/img/160x160/img10.jpg" alt="Image Description">
          </div>
          <!-- End Logo -->
        </div>
        <div class="col-4 mt-6" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"15", mid:"0", final:"-15"}]'>
          <!-- Logo -->
          <div class="d-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 mx-auto">
            <img class="avatar-img" src="../../assets/img/160x160/img11.jpg" alt="Image Description">
          </div>
          <!-- End Logo -->
        </div>
      </div>
    </div>
  </div>

  <div class="container space-3 space-sm-4 position-relative z-index-2">
    <!-- Title -->
    <div class="w-md-80 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="font-weight-bold" href="#">Discover how businesses use Front <i class="fas fa-angle-right fa-sm ml-1"></i></a>
    </div>
    <!-- End Title -->
  </div>

  <div class="position-absolute top-0 left-0 w-100 h-100 gradient-y-lg-white"></div>
</div>
<!-- End Works Section -->
Copy
<link rel="stylesheet" href="../../assets/vendor/dzsparallaxer/dzsparallaxer.css">
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
Copy

Component #4 (with slider)

Image Description
Image Description
Image Description
Image Description
Image Description 
<!-- Clients Section -->
<div class="container space-2">
  <div class="js-slick-carousel slick"
       data-hs-slick-carousel-options='{
         "slidesToShow": 5,
         "autoplay": true,
         "autoplaySpeed": 5000,
         "infinite": true,
         "responsive": [{
           "breakpoint": 1200,
           "settings": {
             "slidesToShow": 4
           }
         }, {
           "breakpoint": 992,
           "settings": {
             "slidesToShow": 4
           }
         }, {
           "breakpoint": 768,
           "settings": {
             "slidesToShow": 3
           }
         }, {
           "breakpoint": 576,
           "settings": {
             "slidesToShow": 3
           }
         }]
       }'>
    <div class="js-slide">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/kaplan.svg" alt="Image Description">
    </div>
    <div class="js-slide">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/hubspot.svg" alt="Image Description">
    </div>
    <div class="js-slide">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/stripe.svg" alt="Image Description">
    </div>
    <div class="js-slide">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/slack.svg" alt="Image Description">
    </div>
    <div class="js-slide">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/airbnb.svg" alt="Image Description">
    </div>
    <div class="js-slide">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/spotify.svg" alt="Image Description">
    </div>
    <div class="js-slide">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/weebly.svg" alt="Image Description">
    </div>
  </div>
</div>
<!-- End Clients Section -->
Copy
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

<!-- JS Front -->
<script src="../../assets/js/hs.slick-carousel.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of slick carousel
    $('.js-slick-carousel').each(function() {
      var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
    });
  });
</script>
Copy

Component #5 (with .col-* classes)

Join 40,000+ agencies and businesses using Front today!

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description 
<!-- Clients Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
    <h2>Join 40,000+ agencies and businesses using Front today!</h2>
  </div>
  <!-- End Title -->

  <!-- Clients -->
  <div class="row justify-content-between text-center">
    <div class="col-4 col-lg-2 mb-5 mb-lg-0">
      <div class="mx-3">
        <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/boring-company.svg" alt="Image Description">
      </div>
    </div>
    <div class="col-4 col-lg-2 mb-5 mb-lg-0">
      <div class="mx-3">
        <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/netflix.svg" alt="Image Description">
      </div>
    </div>
    <div class="col-4 col-lg-2 mb-5 mb-lg-0">
      <div class="mx-3">
        <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/embark.svg" alt="Image Description">
      </div>
    </div>
    <div class="col-4 col-lg-2">
      <div class="mx-3">
        <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/slack.svg" alt="Image Description">
      </div>
    </div>
    <div class="col-4 col-lg-2">
      <div class="mx-3">
        <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/uber.svg" alt="Image Description">
      </div>
    </div>
    <div class="col-4 col-lg-2">
      <div class="mx-3">
        <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/stripe.svg" alt="Image Description">
      </div>
    </div>
  </div>
  <!-- End Clients -->
</div>
<!-- End Clients Section -->
Copy

Component #6

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
99.9%

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

<!-- Clients Section -->
<div class="container">
  <div class="row align-items-lg-center">
    <div class="col-md-7 col-lg-8 mb-5 mb-md-0">
      <!-- Clients -->
      <div class="row justify-content-center border-top space-top-2">
        <div class="col-4 col-lg-2 mb-4 mb-lg-0">
          <div class="mx-2">
            <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/slack.svg" alt="Image Description">
          </div>
        </div>
        <div class="col-4 col-lg-2 mb-4 mb-lg-0">
          <div class="mx-2">
            <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/google.svg" alt="Image Description">
          </div>
        </div>
        <div class="col-4 col-lg-2 mb-4 mb-lg-0">
          <div class="mx-2">
            <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/spotify.svg" alt="Image Description">
          </div>
        </div>
        <div class="col-4 col-lg-2 mb-4 mb-lg-0">
          <div class="mx-2">
            <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/airbnb.svg" alt="Image Description">
          </div>
        </div>
        <div class="col-4 col-lg-2 mb-4 mb-lg-0">
          <div class="mx-2">
            <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/shopify.svg" alt="Image Description">
          </div>
        </div>
        <div class="col-4 col-lg-2 mb-4 mb-lg-0">
          <div class="mx-2">
            <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/netflix.svg" alt="Image Description">
          </div>
        </div>
      </div>
      <!-- End Clients -->
    </div>

    <div class="col-md-5 col-lg-4">
      <div class="pl-md-4">
        <span class="d-block display-3 text-primary text-lh-sm">99.9%</span>
        <p>Believe basic computer skills are all you need to plan projects with Front Pay.</p>
      </div>
    </div>
  </div>
</div>
<!-- End Clients Section -->
Copy

Component #7

Trusted by the world's best

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description 
<!-- Clients Section -->
<div class="container space-1">
  <div class="w-lg-75 mx-lg-auto">
    <div class="text-center mb-4">
      <h2 class="divider divider-text">Trusted by the world's best</h2>
    </div>

    <div class="row justify-content-between text-center">
      <div class="col-4 col-lg-2 mb-5 mb-lg-0">
        <div class="mx-3">
          <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/amazon.svg" alt="Image Description">
        </div>
      </div>
      <div class="col-4 col-lg-2 mb-5 mb-lg-0">
        <div class="mx-3">
          <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/netflix.svg" alt="Image Description">
        </div>
      </div>
      <div class="col-4 col-lg-2 mb-5 mb-lg-0">
        <div class="mx-3">
          <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/paypal.svg" alt="Image Description">
        </div>
      </div>
      <div class="col-4 col-lg-2">
        <div class="mx-3">
          <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/slack.svg" alt="Image Description">
        </div>
      </div>
      <div class="col-4 col-lg-2">
        <div class="mx-3">
          <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/samsung.svg" alt="Image Description">
        </div>
      </div>
      <div class="col-4 col-lg-2">
        <div class="mx-3">
          <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/stripe.svg" alt="Image Description">
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Clients Section -->
Copy

Component #8

Trusted by the world's best

Image Description
Image Description
Image Description
Image Description
Image Description 
<!-- Clients Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="w-md-75 w-lg-50 text-center mx-md-auto mb-7">
    <h4 class="text-body h6 text-cap">Trusted by the world's best</h4>
  </div>
  <!-- End Title -->

  <div class="js-slick-carousel slick"
     data-hs-slick-carousel-options='{
       "slidesToShow": 5,
       "autoplay": true,
       "autoplaySpeed": 5000,
       "infinite": true,
       "responsive": [{
         "breakpoint": 1200,
         "settings": {
           "slidesToShow": 4
         }
       }, {
         "breakpoint": 992,
         "settings": {
           "slidesToShow": 4
         }
       }, {
         "breakpoint": 768,
         "settings": {
           "slidesToShow": 3
         }
       }, {
         "breakpoint": 576,
         "settings": {
           "slidesToShow": 3
         }
       }]
     }'>
    <div class="js-slide">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/weebly-dark.svg" alt="Image Description">
    </div>
    <div class="js-slide">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/uber-original.svg" alt="Image Description">
    </div>
    <div class="js-slide">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/slack-dark.svg" alt="Image Description">
    </div>
    <div class="js-slide">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/airbnb-dark.svg" alt="Image Description">
    </div>
    <div class="js-slide">
      <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/spotify-dark.svg" alt="Image Description">
    </div>
  </div>
</div>
<!-- End Clients Section -->
Copy