Clients
Display the clients of your business that will make your site stand out on the web.
Simple #1
<!-- Clients -->
<ul class="list-inline text-center mb-0">
<li class="list-inline-item mx-3 mb-4 mb-sm-0">
<img class="u-clients" src="../assets/img/clients/airbnb.png" alt="Logo">
</li>
<li class="list-inline-item mx-3 mb-4 mb-sm-0">
<img class="u-clients" src="../assets/img/clients/google.png" alt="Logo">
</li>
<li class="list-inline-item mx-3 mb-4 mb-sm-0">
<img class="u-clients" src="../assets/img/clients/mapbox.png" alt="Logo">
</li>
<li class="list-inline-item mx-3 mb-4 mb-sm-0">
<img class="u-clients" src="../assets/img/clients/spotify.png" alt="Logo">
</li>
</ul>
<!-- End Clients -->
Multiple #1
<!-- Clients Logo -->
<div class="row justify-content-center text-center">
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/img/clients/amazon.png" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/img/clients/alphabet.png" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/img/clients/paypal.png" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/img/clients/slack.png" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/img/clients/samsung.png" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/img/clients/google.png" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/img/clients/fitbit.png" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/img/clients/stripe.png" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/img/clients/mapbox.png" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/img/clients/spotify.png" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/img/clients/uber.png" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8 mb-md-0">
<img class="u-clients" src="../assets/img/clients/airbnb.png" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8 mb-md-0">
<img class="u-clients" src="../assets/img/clients/netflix.png" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8 mb-md-0">
<img class="u-clients" src="../assets/img/clients/embark.png" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8 mb-md-0">
<img class="u-clients" src="../assets/img/clients/lenovo.png" alt="Image Description">
</div>
<div class="col-4 col-md-2">
<img class="u-clients" src="../assets/img/clients/boring-company.png" alt="Image Description">
</div>
<div class="col-4 col-md-2">
<img class="u-clients" src="../assets/img/clients/hubspot.png" alt="Image Description">
</div>
</div>
<!-- End Clients Logo -->
Carousel white #1
HTML:
<div class="gradient-overlay-half-primary-v1">
<div class="bg-img-hero" style="background-image: url(../assets/img/bg/bg2.png);">
<div class="container text-center space-2">
<!-- Slick Carousel -->
<div class="js-slick-carousel u-slick"
data-autoplay="true"
data-speed="5000"
data-infinite="true"
data-slides-show="6"
data-responsive='[{
"breakpoint": 1200,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 576,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 480,
"settings": {
"slidesToShow": 2
}
}]'>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/amazon-white.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/google-white.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/paypal-white.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/slack-white.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/samsung-white.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/airbnb-white.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/lenovo-white.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/spotify-white.png" alt="Image Description">
</div>
</div>
<!-- End Slick Carousel -->
</div>
</div>
</div>
<!-- End Slick Carousel -->
CSS library:
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Space -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel white #2
HTML:
<!-- Clients Section -->
<div class="container">
<div class="bg-primary shadow-lg rounded p-9 mb-3">
<!-- Slick Carousel -->
<div class="js-slick-carousel u-slick"
data-autoplay="true"
data-speed="5000"
data-infinite="true"
data-slides-show="6"
data-responsive='[{
"breakpoint": 1200,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 576,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 480,
"settings": {
"slidesToShow": 2
}
}]'>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/amazon-white.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/google-white.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/paypal-white.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/slack-white.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/samsung-white.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/airbnb-white.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/lenovo-white.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/spotify-white.png" alt="Image Description">
</div>
</div>
<!-- End Slick Carousel -->
</div>
<div class="text-center">
<a href="#">See all customers <span class="fa fa-angle-right ml-2"></span></a>
</div>
</div>
<!-- End Clients Section -->
CSS library:
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Space -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel #1
HTML:
<!-- Slick Carousel -->
<div class="js-slick-carousel u-slick"
data-autoplay="true"
data-speed="5000"
data-infinite="true"
data-slides-show="6"
data-responsive='[{
"breakpoint": 1200,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 576,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 480,
"settings": {
"slidesToShow": 2
}
}]'>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/amazon.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/google.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/paypal.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/slack.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/samsung.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/airbnb.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/lenovo.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/spotify.png" alt="Image Description">
</div>
</div>
<!-- End Slick Carousel -->
CSS library:
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Space -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel #2
HTML:
<!-- Sponsors -->
<div class="js-slick-carousel u-slick u-slick--gutters-1 u-clients-list text-center"
data-slides-show="5"
data-rows="3"
data-pagi-classes="d-lg-none text-center u-slick__pagination mt-5 mb-0"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 2
}
}]'>
<div class="js-slide u-clients-item py-6 px-3">
<img class="u-clients" src="../../assets/img/clients/airbnb.png" alt="Image Description">
</div>
<div class="js-slide u-clients-item py-6 px-3">
<img class="u-clients" src="../../assets/img/clients/boring-company.png" alt="Image Description">
</div>
<div class="js-slide u-clients-item py-6 px-3">
<img class="u-clients" src="../../assets/img/clients/google.png" alt="Image Description">
</div>
<div class="js-slide u-clients-item py-6 px-3">
<img class="u-clients" src="../../assets/img/clients/mapbox.png" alt="Image Description">
</div>
<div class="js-slide u-clients-item py-6 px-3">
<img class="u-clients" src="../../assets/img/clients/uber.png" alt="Image Description">
</div>
<div class="js-slide u-clients-item py-6 px-3">
<img class="u-clients" src="../../assets/img/clients/hubspot.png" alt="Image Description">
</div>
<div class="js-slide u-clients-item py-6 px-3">
<img class="u-clients" src="../../assets/img/clients/paypal.png" alt="Image Description">
</div>
<div class="js-slide u-clients-item py-6 px-3">
<img class="u-clients" src="../../assets/img/clients/alphabet.png" alt="Image Description">
</div>
<div class="js-slide u-clients-item py-6 px-3">
<img class="u-clients" src="../../assets/img/clients/embark.png" alt="Image Description">
</div>
<div class="js-slide u-clients-item py-6 px-3">
<img class="u-clients" src="../../assets/img/clients/netflix.png" alt="Image Description">
</div>
<div class="js-slide u-clients-item py-6 px-3">
<img class="u-clients" src="../../assets/img/clients/fitbit.png" alt="Image Description">
</div>
<div class="js-slide u-clients-item py-6 px-3">
<img class="u-clients" src="../../assets/img/clients/spotify.png" alt="Image Description">
</div>
<div class="js-slide u-clients-item py-6 px-3">
<img class="u-clients" src="../../assets/img/clients/amazon.png" alt="Image Description">
</div>
<div class="js-slide u-clients-item py-6 px-3">
<img class="u-clients" src="../../assets/img/clients/stripe.png" alt="Image Description">
</div>
<div class="js-slide u-clients-item py-6 px-3">
<img class="u-clients" src="../../assets/img/clients/lenovo.png" alt="Image Description">
</div>
</div>
<!-- End Sponsors -->
CSS library:
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Space -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>