Design
Achieve virtually any design and layout from within the one template.
Learn MoreInformative Blocks - Colorful
Different color style of informative blocks/components.
Colorful #1
Channels
Communication in Front happens in channels, organized by project, topic, team, or whatever makes sense for you.
Integrations
Front works with the tools and services you already use every day. Pipe in information or take action without leaving Front.
Security
We take security seriously at Slack. We offer measures like 2FA and SSO to ensure the safety of your data and protect your organization.
See Help Front in action. Get a Demo
<!-- Features Section -->
<div class="container space-2 text-center">
<div class="position-relative pt-11 pb-7">
<div class="position-relative z-index-2 p-2 p-sm-0">
<!-- News Carousel -->
<div class="js-slick-carousel u-slick u-slick--equal-height u-slick--gutters-3 mb-5"
data-slides-show="3"
data-slides-scroll="1"
data-pagi-classes="d-lg-none u-slick__pagination u-slick__pagination--white mt-5 mb-0"
data-responsive='[{
"breakpoint": 1200,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<!-- Card Block -->
<div class="js-slide mt-1 mb-2">
<div class="w-100 bg-white shadow-soft rounded py-6 px-4">
<h3 class="h5 font-weight-semi-bold mb-5">Channels</h3>
<figure id="featuresSVG1" class="svg-preloader max-width-27 w-100 mx-auto mb-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/server-woman.svg" alt="Image Description"
data-parent="#featuresSVG1">
</figure>
<p>Communication in Front happens in channels, organized by project, topic, team, or whatever makes sense for you.</p>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="js-slide mt-1 mb-2">
<div class="w-100 bg-white shadow-soft rounded py-6 px-4">
<h3 class="h5 font-weight-semi-bold mb-5">Integrations</h3>
<figure id="featuresSVG2" class="svg-preloader max-width-27 w-100 mx-auto mb-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/full-stack.svg" alt="Image Description"
data-parent="#featuresSVG2">
</figure>
<p>Front works with the tools and services you already use every day. Pipe in information or take action without leaving Front.</p>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="js-slide mt-1 mb-2">
<div class="w-100 bg-white shadow-soft rounded py-6 px-4">
<h3 class="h5 font-weight-semi-bold mb-5">Security</h3>
<figure id="featuresSVG3" class="svg-preloader max-width-27 w-100 mx-auto mb-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/business-woman.svg" alt="Image Description"
data-parent="#featuresSVG3">
</figure>
<p>We take security seriously at Slack. We offer measures like 2FA and SSO to ensure the safety of your data and protect your organization.</p>
</div>
</div>
<!-- End Card Block -->
</div>
<!-- Info -->
<p class="text-white">
See Help Front in action.
<a class="text-warning font-weight-medium" href="#">
Get a Demo
<span class="btn btn-icon btn-sm btn-white rounded-circle ml-2">
<span class="fas fa-arrow-right btn-icon__inner"></span>
</span>
</a>
</p>
<!-- End Info -->
</div>
<!-- Background -->
<div class="gradient-half-primary-v4 position-absolute top-0 right-0 bottom-0 left-0 rounded-lg mx-sm-7"></div>
</div>
</div>
<!-- End Features 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>
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<script src="../../assets/js/components/hs.slick.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Colorful #2
<!-- Features Section -->
<div class="container space-2">
<div class="js-slick-carousel u-slick u-slick--equal-height u-slick--gutters-3"
data-slides-show="3"
data-slides-scroll="1"
data-pagi-classes="d-lg-none text-center u-slick__pagination mt-7 mb-0"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 576,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="js-slide">
<!-- Card -->
<div class="w-100 bg-soft-primary text-primary text-center rounded p-5">
<img class="img-fluid" src="../../assets/img/mockups/img7.png" alt="Image Description">
<h4 class="font-weight-semi-bold">Standard</h4>
<p class="font-size-1">Available in:</p>
<div class=" mb-4">
<img class="d-inline-block mr-2" src="../../assets/svg/components/sketch.svg" alt="Sketch" width="25">
<img class="d-inline-block" src="../../assets/svg/components/adobe-xd.svg" alt="Adobe Xd" width="25">
</div>
<a class="btn btn-sm btn-block btn-primary transition-3d-hover" href="#">Preview <small class="fas fa-eye ml-1"></small></a>
</div>
<!-- End Card -->
</div>
<div class="js-slide">
<!-- Card -->
<div class="w-100 bg-soft-info text-warning text-center rounded p-5">
<img class="img-fluid" src="../../assets/img/mockups/img8.png" alt="Image Description">
<h4 class="font-weight-semi-bold">Dark</h4>
<p class="font-size-1">Available in:</p>
<div class=" mb-4">
<img class="d-inline-block" src="../../assets/svg/components/sketch.svg" alt="Sketch" width="25">
</div>
<a class="btn btn-sm btn-block btn-white transition-3d-hover disabled" href="#">Coming soon ...</a>
</div>
<!-- End Card -->
</div>
<div class="js-slide">
<!-- Card -->
<div class="w-100 bg-soft-danger text-warning text-center rounded p-5">
<img class="img-fluid" src="../../assets/img/mockups/img9.png" alt="Image Description">
<h4 class="font-weight-semi-bold">Wireframe</h4>
<p class="font-size-1">Available in:</p>
<div class=" mb-4">
<img class="d-inline-block mr-2" src="../../assets/svg/components/sketch.svg" alt="Sketch" width="25">
<img class="d-inline-block" src="../../assets/svg/components/adobe-xd.svg" alt="Adobe Xd" width="25">
</div>
<a class="btn btn-sm btn-block btn-white transition-3d-hover disabled" href="#">Coming soon ...</a>
</div>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Features Section -->
<link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.fancybox.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of fancybox
$.HSCore.components.HSFancyBox.init('.js-fancybox');
});
</script>
Colorful #3
Compatible with Sketch
Front: A digital UI kit UI kit
Super clean, minimalistic, stylized mockup collection with awesome customization features and huge resolution.
Building brand through design
Graphic design and illustrationHigh-detailed business scenes for landing pages' headers and mobile screens.
Pixeel Group
Graphic design and illustrationWe work with the largest companies all over the world.
Compatible with Sketch
Atlas: A travel app UI kit from Front UI kit
This UI kit has all you need to manage your hypothetical customer's smart devices like thermostats, lights, and other appliances that make for a connected modern home.
<!-- Works Section -->
<div class="container space-2">
<div class="card-md-columns card-md-2-count card-md-2-gap card-lg-5-gap pt-md-11">
<!-- Card -->
<a class="card border-0 bg-soft-primary text-indigo transition-3d-hover p-5 p-lg-7 mt-md-n11 mb-3 mb-sm-5 mb-lg-11" href="#">
<img class="img-fluid mb-7" src="../../assets/img/755x470/img1.jpg" alt="Image Description">
<div class="media align-items-center max-width-35 mb-3">
<div class="mr-3">
<img class="img-fluid" src="../../assets/svg/components/sketch.svg" alt="Sketch" width="32">
</div>
<div class="media-body">
<small class="d-block mb-0">Compatible with Sketch</small>
</div>
</div>
<h4 class="d-flex justify-content-between">
Front: A digital UI kit
<span class="d-block">
<span class="badge badge-success badge-pill ml-3">UI kit</span>
</span>
</h4>
<p class="text-dark">Super clean, minimalistic, stylized mockup collection with awesome customization features and huge resolution.</p>
</a>
<!-- End Card -->
<!-- Card -->
<a class="card border-0 bg-soft-info text-indigo transition-3d-hover p-5 p-lg-7 mb-3 mb-sm-5 mb-lg-11" href="#">
<img class="img-fluid mb-7" src="../../assets/img/mockups/img13.png" alt="Image Description">
<h4 class="mb-1">Building brand through design</h4>
<small class="d-block mb-3">Graphic design and illustration</small>
<p class="text-dark">High-detailed business scenes for landing pages' headers and mobile screens.</p>
</a>
<!-- End Card -->
<!-- Card -->
<a class="card border-0 bg-soft-danger text-indigo transition-3d-hover p-5 p-lg-7 mb-3 mb-sm-5 mb-lg-11" href="#">
<img class="img-fluid mb-7" src="../../assets/img/mockups/img12.png" alt="Image Description">
<h4 class="mb-1">Pixeel Group</h4>
<small class="d-block mb-3">Graphic design and illustration</small>
<p class="text-dark">We work with the largest companies all over the world.</p>
</a>
<!-- End Card -->
<!-- Card -->
<a class="card border-0 bg-soft-indigo text-indigo transition-3d-hover p-5 p-lg-7 mb-3 mb-sm-5 mb-lg-11" href="#">
<img class="img-fluid mb-7" src="../../assets/img/mockups/img11.png" alt="Image Description">
<div class="media align-items-center max-width-35 mb-3">
<div class="mr-3">
<img class="img-fluid" src="../../assets/svg/components/sketch.svg" alt="Sketch" width="32">
</div>
<div class="media-body">
<small class="d-block mb-0">Compatible with Sketch</small>
</div>
</div>
<h4 class="d-flex justify-content-between">
Atlas: A travel app UI kit from Front
<span class="d-block">
<span class="badge badge-success badge-pill ml-3">UI kit</span>
</span>
</h4>
<p class="text-dark">This UI kit has all you need to manage your hypothetical customer's smart devices like thermostats, lights, and other appliances that make for a connected modern home.</p>
</a>
<!-- End Card -->
</div>
</div>
<!-- End Works Section -->
Colorful #4
<!-- Services Section -->
<div class="container space-2">
<div id="SVGServices" class="svg-preloader row">
<div class="col-lg-5 mb-3 mb-sm-5 mb-lg-0">
<!-- Card -->
<a class="card card-text-dark border-0 bg-primary text-white shadow-lg min-height-380 h-100 transition-3d-hover" href="#">
<figure class="position-sm-absolute top-0 left-0 w-100">
<img class="js-svg-injector rounded-top" src="../../assets/svg/components/abstract-shapes-18.svg" alt="SVG"
data-parent="#SVGServices">
</figure>
<article class="d-flex align-content-end flex-wrap h-100 p-5">
<h4>Design</h4>
<p class="text-white-70">Achieve virtually any design and layout from within the one template.</p>
<span class="text-white">Learn More <small class="fas fa-arrow-right ml-1"></small></span>
</article>
</a>
<!-- End Card -->
</div>
<div class="col-sm-6 col-lg mb-3 mb-sm-0">
<!-- Card -->
<a class="card card-text-dark shadow-lg min-height-380 h-100 transition-3d-hover" href="#">
<figure class="position-sm-absolute top-0 left-0 w-100">
<img class="js-svg-injector rounded-top" src="../../assets/svg/components/abstract-shapes-17.svg" alt="SVG"
data-parent="#SVGServices">
</figure>
<article class="d-flex align-content-end flex-wrap h-100 p-5">
<h4 class="h5">Development</h4>
<p>We strive to figure out ways to help your business grow through all platforms.</p>
<span class="text-primary">Learn More <small class="fas fa-arrow-right ml-1"></small></span>
</article>
</a>
<!-- End Card -->
</div>
<div class="col-sm-6 col-lg">
<!-- Card -->
<a class="card card-text-dark shadow-lg min-height-380 h-100 transition-3d-hover" href="#">
<figure class="position-sm-absolute top-0 left-0 w-100">
<img class="js-svg-injector rounded-top" src="../../assets/svg/components/abstract-shapes-16.svg" alt="SVG"
data-parent="#SVGServices">
</figure>
<article class="d-flex align-content-end flex-wrap h-100 p-5">
<h4 class="h5">Marketing</h4>
<p>Find what you need in one template and combine features at will.</p>
<span class="text-primary">Learn More <small class="fas fa-arrow-right ml-1"></small></span>
</article>
</a>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Services Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Colorful #5
Front process
Once you are invited to Front Agency, you company will be set within days.
Find Out More
Product design
Easy and fast adjustments of elements are possible with Front template.
Find Out More
<!-- Services Section -->
<div class="container">
<div class="row">
<div class="col-lg-6 mb-3 mb-lg-0">
<!-- Card -->
<div class="card border-0 bg-primary text-white shadow h-100 overflow-hidden p-6">
<div class="w-65 pr-2">
<h3 class="h3 font-weight-medium">Front process</h3>
<p class="text-white">Once you are invited to Front Agency, you company will be set within days.</p>
<a class="btn btn-sm btn-white transition-3d-hover" href="#">Find Out More <span class="fas fa-angle-right ml-1"></span></a>
</div>
<div class="position-absolute right-0 bottom-0 w-50 mb-n3 mr-n4">
<img class="img-fluid" src="../../assets/img/mockups/img15.png" alt="Image Description">
</div>
</div>
<!-- End Card -->
</div>
<div class="col-lg-6">
<!-- Card -->
<div class="card border-0 bg-warning text-white shadow h-100 overflow-hidden p-6">
<div class="w-65 pr-2">
<h3 class="h3 font-weight-medium">Product design</h3>
<p class="text-white">Easy and fast adjustments of elements are possible with Front template.</p>
<a class="btn btn-sm btn-white transition-3d-hover" href="#">Find Out More <span class="fas fa-angle-right ml-1"></span></a>
</div>
<div class="position-absolute right-0 bottom-0 w-50 mb-n3 mr-n4">
<img class="img-fluid" src="../../assets/img/mockups/img12.png" alt="Image Description">
</div>
</div>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Services Section -->
Colorful #6
<div class="row mx-n2">
<div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
<!-- Card -->
<a class="card card-frame h-100" href="app-description.html">
<div class="card-body bg-success rounded-top p-5">
<div class="u-lg-avatar bg-white rounded p-2 mx-auto">
<img class="img-fluid" src="../../assets/img/160x160/img34.png" alt="Image Description">
</div>
</div>
<div class="card-body p-4">
<div class="d-flex align-items-center mb-1">
<span class="d-block text-dark font-weight-medium">Aircall</span>
<img class="ml-2" src="../../assets/svg/components/top-vendor.svg" alt="Image Description" title="Top Vendor" width="16">
</div>
<span class="d-block text-secondary font-size-1">Deliver call activity and voicemails straight to your inbox</span>
</div>
</a>
<!-- End Card -->
</div>
<div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
<!-- Card -->
<a class="card card-frame h-100" href="app-description.html">
<div class="card-body bg-danger rounded-top p-5">
<div class="u-lg-avatar bg-white rounded p-2 mx-auto">
<img class="img-fluid" src="../../assets/img/160x160/img17.png" alt="Image Description">
</div>
</div>
<div class="card-body p-4">
<div class="d-flex align-items-center mb-1">
<span class="d-block text-dark font-weight-medium">Google</span>
<img class="ml-2" src="../../assets/svg/components/top-vendor.svg" alt="Image Description" title="Top Vendor" width="16">
</div>
<span class="d-block text-secondary font-size-1">Multinational technology company that specializes in Internet-related services</span>
</div>
</a>
<!-- End Card -->
</div>
<div class="col-sm-6 col-md-4 px-2">
<!-- Card -->
<a class="card card-frame h-100" href="app-description.html">
<div class="card-body bg-warning rounded-top p-5">
<div class="u-lg-avatar bg-white rounded p-2 mx-auto">
<img class="img-fluid" src="../../assets/img/160x160/img14.png" alt="Image Description">
</div>
</div>
<div class="card-body p-4">
<div class="d-flex align-items-center mb-1">
<span class="d-block text-dark font-weight-medium">Slack</span>
<img class="ml-2" src="../../assets/svg/components/top-vendor.svg" alt="Image Description" title="Top Vendor" width="16">
</div>
<span class="d-block text-secondary font-size-1">Email collaboration and email service desk made easy</span>
</div>
</a>
<!-- End Card -->
</div>
</div>
Colorful #7
Get in touch
If you would like to find out more about how we can help you, please give us a call or drop us an email.
Contact Us
<!-- Contact Section -->
<div id="SVGcontactsSection" class="svg-preloader position-relative gradient-half-warning-v1">
<div class="container position-relative z-index-2">
<div class="row">
<div class="col-lg-6">
<!-- Hire Us -->
<div class="d-flex align-items-center space-2 min-height-380 pr-lg-7">
<div class="d-block">
<h2 class="text-white">Have a project?</h2>
<p class="text-white-70 mb-4">Hire us. Our top professionals are ready to help with your business.</p>
<a class="btn text-primary btn-white btn-wide transition-3d-hover" href="../pages/hire-us.html">Hire Us</a>
</div>
</div>
<figure class="w-50 position-absolute right-0 bottom-0 mr-7">
<img class="js-svg-injector" src="../assets/svg/illustrations/building-site.svg" alt="SVG Illustration"
data-parent="#SVGcontactsSection">
</figure>
<!-- End Hire Us -->
</div>
<div class="col-lg-6">
<!-- Contact Us -->
<div class="d-flex align-items-center space-2 min-height-380 pl-lg-7">
<div class="d-block">
<h2 class="text-white">Get in touch</h2>
<p class="text-white-70 mb-4">If you would like to find out more about how we can help you, please give us a call or drop us an email.</p>
<a class="btn text-warning btn-white btn-wide transition-3d-hover" href="../pages/contacts-agency.html">Contact Us</a>
</div>
</div>
<figure class="w-50 position-absolute right-0 bottom-0">
<img class="js-svg-injector" src="../assets/svg/illustrations/pushing-boundaries.svg" alt="SVG Illustration"
data-parent="#SVGcontactsSection">
</figure>
<!-- End Contact Us -->
</div>
</div>
</div>
<div class="col-lg-6 gradient-half-primary-v1 position-absolute top-0 left-0 min-height-380"></div>
</div>
<!-- End Contact Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>