Clients
Component #1
Who partners with Front?
View More
Thousands of companies, including platforms, and plugin builders work with Front.
<!-- 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 -->
Component #2
Trusted by Open Source, enterprise, and more than 33,000 of you
<!-- 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 -->
Component #3
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 -->
<link rel="stylesheet" href="./assets/vendor/dzsparallaxer/dzsparallaxer.css">
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
Component #4 (with slider)
<!-- 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 -->
<link rel="stylesheet" href="./assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Front -->
<!-- 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>
Component #5 (with .col-* classes)
Join 40,000+ agencies and businesses using Front today!
<!-- 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 -->
Component #6
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 -->
Component #7
Trusted by the world's best
<!-- Clients Section -->
<div class="container space-1">
<div class="w-lg-75 mx-lg-auto">
<div class="text-center mb-4">
<span class="divider divider-text">Trusted by the world's best</span>
</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 -->
Component #8
Trusted by the world's best
<!-- 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 -->