Clients
Display the clients of your business that will make your site stand out on the web.
Simple #1
<div class="d-flex justify-content-center">
<div class="mx-4">
<img class="u-clients" src="../assets/svg/clients-logo/slack.svg" alt="Image Description">
</div>
<div class="mx-4">
<img class="u-clients" src="../assets/svg/clients-logo/google.svg" alt="Image Description">
</div>
<div class="mx-4">
<img class="u-clients" src="../assets/svg/clients-logo/spotify.svg" alt="Image Description">
</div>
</div>
White #1
<div class="d-flex justify-content-center bg-primary p-5">
<div class="mx-4">
<img class="u-clients" src="../assets/svg/clients-logo/slack-white.svg" alt="Image Description">
</div>
<div class="mx-4">
<img class="u-clients" src="../assets/svg/clients-logo/google-white.svg" alt="Image Description">
</div>
<div class="mx-4">
<img class="u-clients" src="../assets/svg/clients-logo/spotify-white.svg" alt="Image Description">
</div>
</div>
Colorful #1
<div class="row justify-content-center text-center">
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/svg/clients-logo/amazon-original.svg" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/svg/clients-logo/alphabet-original.svg" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/svg/clients-logo/paypal-original.svg" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/svg/clients-logo/slack-original.svg" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/svg/clients-logo/samsung-original.svg" alt="Image Description">
</div>
<div class="w-100"></div>
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/svg/clients-logo/google-original.svg" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/svg/clients-logo/fitbit-original.svg" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/svg/clients-logo/shopify-original.svg" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/svg/clients-logo/stripe-original.svg" alt="Image Description">
</div>
<div class="w-100"></div>
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/svg/clients-logo/mapbox-original.svg" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/svg/clients-logo/spotify-original.svg" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8">
<img class="u-clients" src="../assets/svg/clients-logo/uber-original.svg" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8 mb-md-0">
<img class="u-clients" src="../assets/svg/clients-logo/airbnb-original.svg" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8 mb-md-0">
<img class="u-clients" src="../assets/svg/clients-logo/netflix-original.svg" alt="Image Description">
</div>
<div class="w-100"></div>
<div class="col-4 col-md-2 mb-8 mb-md-0">
<img class="u-clients" src="../assets/svg/clients-logo/embark-original.svg" alt="Image Description">
</div>
<div class="col-4 col-md-2 mb-8 mb-md-0">
<img class="u-clients" src="../assets/svg/clients-logo/lenovo-original.svg" alt="Image Description">
</div>
<div class="col-4 col-md-2">
<img class="u-clients" src="../assets/svg/clients-logo/boring-company-original.svg" alt="Image Description">
</div>
<div class="col-4 col-md-2">
<img class="u-clients" src="../assets/svg/clients-logo/hubspot-original.svg" alt="Image Description">
</div>
</div>
Carousel #1
HTML:
<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/svg/clients-logo/amazon.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/svg/clients-logo/shopify.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/svg/clients-logo/paypal.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/svg/clients-logo/slack.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/svg/clients-logo/samsung.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/svg/clients-logo/google.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/svg/clients-logo/lenovo.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/svg/clients-logo/spotify.svg" alt="Image Description">
</div>
</div>
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 Implementing Plugins -->
<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>