Icon Blocks - Center Aligned
Start building your website with dozens of ready-to-use icon blocks.
Icon blocks #1
Professional Design
Achieve virtually any design and layout from within the one template.
Front Strategy
We strive to figure out ways to help your business grow through all platforms.
Unlimited Power
Find what you need in one template and combine features at will.
<!-- Icon Blocks Section -->
<div class="container space-top-2">
<div class="row">
<div class="col-md-4 mb-7">
<div class="text-center px-lg-3">
<span class="btn btn-icon btn-lg btn-soft-danger rounded-circle mb-5">
<span class="fab fa-yelp btn-icon__inner fa-2x btn-icon__inner-bottom-minus"></span>
</span>
<h3 class="h5">Professional Design</h3>
<p class="mb-md-0">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
<div class="col-md-4 mb-7">
<div class="text-center px-lg-3">
<span class="btn btn-icon btn-lg btn-soft-primary rounded-circle mb-5">
<span class="fas fa-fire btn-icon__inner fa-2x btn-icon__inner-bottom-minus"></span>
</span>
<h3 class="h5">Front Strategy</h3>
<p class="mb-md-0">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
<div class="col-md-4 mb-7">
<div class="text-center px-lg-3">
<span class="btn btn-icon btn-lg btn-soft-success rounded-circle mb-5">
<span class="fab fa-whmcs btn-icon__inner fa-2x btn-icon__inner-bottom-minus"></span>
</span>
<h3 class="h5">Unlimited Power</h3>
<p class="mb-md-0">Find what you need in one template and combine features at will.</p>
</div>
</div>
</div>
</div>
<!-- End Icon Blocks Section -->
Icon blocks #2
Professional Design
Achieve virtually any design and layout from within the one template.
Front Strategy
We strive to figure out ways to help your business grow through all platforms.
Unlimited Power
Find what you need in one template and combine features at will.
<!-- Process Section -->
<div class="container space-2">
<div class="row">
<div class="col-md-4 mb-7 mb-md-0">
<!-- Process -->
<div class="text-center">
<div class="position-relative">
<div id="SVGcircleProcess1" class="svg-preloader u-indicator-dots min-height-155 mb-2">
<!-- Icon -->
<span class="text-success btn btn-lg btn-icon mt-7">
<span class="fab fa-yelp font-size-5 btn-icon__inner btn-icon__inner-bottom-minus"></span>
</span>
<!-- End Icon -->
<!-- SVG Shape -->
<figure class="w-100 position-absolute top-0 right-0 left-0 z-index-n1">
<img class="js-svg-injector" src="../../assets/svg/components/circle-process-1.svg" alt="Image Description"
data-parent="#SVGcircleProcess1">
</figure>
<!-- End SVG Shape -->
</div>
</div>
<h3 class="h5">Professional Design</h3>
<p class="mb-md-0">Achieve virtually any design and layout from within the one template.</p>
</div>
<!-- End Process -->
</div>
<div class="col-md-4 mb-7 mb-md-0">
<!-- Process -->
<div class="text-center">
<div class="position-relative">
<div id="SVGcircleProcess2" class="svg-preloader u-indicator-dots min-height-155 mb-2">
<!-- Icon -->
<span class="text-primary btn btn-lg btn-icon mt-7">
<span class="fas fa-fire font-size-5 btn-icon__inner btn-icon__inner-bottom-minus"></span>
</span>
<!-- End Icon -->
<!-- SVG Shape -->
<figure class="w-100 position-absolute top-0 right-0 left-0 z-index-n1">
<img class="js-svg-injector" src="../../assets/svg/components/circle-process-2.svg" alt="Image Description"
data-parent="#SVGcircleProcess2">
</figure>
<!-- End SVG Shape -->
</div>
</div>
<h3 class="h5">Front Strategy</h3>
<p class="mb-md-0">We strive to figure out ways to help your business grow through all platforms.</p>
<!-- End Process -->
</div>
</div>
<div class="col-md-4">
<!-- Process -->
<div class="text-center">
<div id="SVGcircleProcess3" class="svg-preloader min-height-155 mb-2">
<!-- Icon -->
<span class="text-danger btn btn-lg btn-icon mt-7">
<span class="fab fa-whmcs font-size-5 btn-icon__inner btn-icon__inner-bottom-minus"></span>
</span>
<!-- End Icon -->
<!-- SVG Shape -->
<figure class="w-100 position-absolute top-0 right-0 left-0 z-index-n1">
<img class="js-svg-injector" src="../../assets/svg/components/circle-process-3.svg" alt="Image Description"
data-parent="#SVGcircleProcess3">
</figure>
<!-- End SVG Shape -->
</div>
<h3 class="h5">Unlimited Power</h3>
<p class="mb-md-0">Find what you need in one template and combine features at will.</p>
<!-- End Process -->
</div>
</div>
</div>
</div>
<!-- End Process 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>
Icon blocks #3
Meet Front UI/UX kit
300+
UI elements
270+
in 3 categories
450+
Organized sheets
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.
Bootstrap 4 Grid
992px
Google Fonts
PoppinsFree Icons
FA Icon SetSymbol overrides
Easily customizable
<!-- Features Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-lg-50 text-center mx-lg-auto mb-5">
<span class="d-block text-secondary font-size-1 font-weight-medium text-uppercase">Meet Front UI/UX kit</span>
</div>
<!-- End Title -->
<!-- Features -->
<div id="featuresSVG" class="svg-preloader w-lg-60 mx-lg-auto mb-5">
<div class="row mx-n2">
<div class="col-sm-4 px-2 mb-3 mb-sm-0">
<!-- Icon Block -->
<div class="border-dashed text-center rounded p-4">
<figure class="ie-height-56 w-100 max-width-8 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-45.svg" alt="SVG"
data-parent="#featuresSVG">
</figure>
<h3 class="h5 mb-0">300+</h3>
<p class="font-size-1 mb-0">UI elements</p>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-4 px-2 mb-3 mb-sm-0">
<!-- Icon Block -->
<div class="border-dashed text-center rounded p-4">
<figure class="ie-height-56 w-100 max-width-8 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-37.svg" alt="SVG"
data-parent="#featuresSVG">
</figure>
<h4 class="h5 mb-0">270+</h4>
<p class="font-size-1 mb-0">in 3 categories</p>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-4 px-2">
<!-- Icon Block -->
<div class="border-dashed text-center rounded p-4">
<figure class="ie-height-56 w-100 max-width-8 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-29.svg" alt="SVG"
data-parent="#featuresSVG">
</figure>
<h4 class="h5 mb-0">450+</h4>
<p class="font-size-1 mb-0">Organized sheets</p>
</div>
<!-- End Icon Block -->
</div>
</div>
</div>
<!-- End Features -->
<div class="w-lg-50 text-center mx-lg-auto mb-10">
<p>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>
</div>
<div class="w-lg-65 text-center mx-lg-auto">
<div class="row">
<div class="col-6 col-md-3 mb-3 mb-md-0">
<!-- Icon Block -->
<div class="text-center">
<span class="btn btn-icon btn-white shadow-soft mb-3">
<span class="fas fa-align-justify btn-icon__inner"></span>
</span>
<h4 class="h6 mb-0">Bootstrap 4 Grid</h4>
<p class="font-size-1">992px</p>
</div>
<!-- End Icon Block -->
</div>
<div class="col-6 col-md-3 mb-3 mb-md-0">
<!-- Icon Block -->
<div class="text-center">
<span class="btn btn-icon btn-white shadow-soft mb-3">
<span class="fas fa-font btn-icon__inner"></span>
</span>
<h4 class="h6 mb-0">Google Fonts</h4>
<a class="text-secondary font-size-1" href="https://fonts.google.com/specimen/Poppins" target="_blank">
Poppins
<small class="fas fa-external-link-alt ml-1"></small>
</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-6 col-md-3">
<!-- Icon Block -->
<div class="text-center">
<span class="btn btn-icon btn-white shadow-soft mb-3">
<span class="fab fa-fonticons-fi btn-icon__inner"></span>
</span>
<h4 class="h6 mb-0">Free Icons</h4>
<a class="text-secondary font-size-1" href="https://fontawesome.com/" target="_blank">
FA Icon Set
<small class="fas fa-external-link-alt ml-1"></small>
</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-6 col-md-3">
<!-- Icon Block -->
<div class="text-center">
<span class="btn btn-icon btn-white shadow-soft mb-3">
<span class="fas fa-sync-alt btn-icon__inner"></span>
</span>
<h4 class="h6 mb-0">Symbol overrides</h4>
<p class="font-size-1">Easily customizable</p>
</div>
<!-- End Icon Block -->
</div>
</div>
</div>
</div>
<!-- End Features 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>
Icon blocks #4
<!-- Icon Blocks Section -->
<div class="container space-2">
<div class="row justify-content-md-between">
<div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-0 mb-9 mb-lg-0">
<!-- Icon Block -->
<div class="text-center px-lg-5">
<figure id="icon12" class="svg-preloader ie-height-72 max-width-10 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-12.svg" alt="SVG"
data-parent="#icon12">
</figure>
<h3 class="h5">Property guides</h3>
<p>A must-have read for anyone buying or selling property.</p>
<a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
Learn More
<span class="fas fa-angle-right ml-2"></span>
</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-9 mb-lg-0">
<!-- Icon Block -->
<div class="text-center px-lg-5">
<figure id="icon10" class="svg-preloader ie-height-72 max-width-10 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-10.svg" alt="SVG"
data-parent="#icon10">
</figure>
<h3 class="h5">Affordability calculator</h3>
<p>Find out how much you could borrow.</p>
<a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
Check Now
<span class="fas fa-angle-right ml-2"></span>
</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4">
<!-- Icon Block -->
<div class="text-center px-lg-5">
<figure id="icon11" class="svg-preloader ie-height-72 max-width-10 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-11.svg" alt="SVG"
data-parent="#icon11">
</figure>
<h3 class="h5">Mortgage calculator</h3>
<p>Calculate monthly mortgage payments.</p>
<a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
Check Now
<span class="fas fa-angle-right ml-2"></span>
</a>
</div>
<!-- End Icon Block -->
</div>
</div>
</div>
<!-- End Icon Blocks 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>
Icon blocks #5
Address
153 Williamson Plaza, 09514
support@htmlstream.com
Phone Number
+1 (062) 109-9222
Fax
+1 (062) 109-9223
<!-- Contacts Info Section -->
<div class="clearfix space-2">
<div class="row no-gutters">
<div class="col-sm-6 col-lg-3 u-ver-divider u-ver-divider--none-lg">
<!-- Contacts Info -->
<div class="text-center py-5">
<figure id="icon8" class="svg-preloader ie-height-56 max-width-8 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-8.svg" alt="SVG"
data-parent="#icon8">
</figure>
<h2 class="h6 mb-0">Address</h2>
<p class="mb-0">153 Williamson Plaza, 09514</p>
</div>
<!-- End Contacts Info -->
</div>
<div class="col-sm-6 col-lg-3 u-ver-divider u-ver-divider--none-lg">
<!-- Contacts Info -->
<div class="text-center py-5">
<figure id="icon15" class="svg-preloader ie-height-56 max-width-8 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-15.svg" alt="SVG"
data-parent="#icon15">
</figure>
<h3 class="h6 mb-0">Email</h3>
<p class="mb-0">support@htmlstream.com</p>
</div>
<!-- End Contacts Info -->
</div>
<div class="col-sm-6 col-lg-3 u-ver-divider u-ver-divider--none-lg">
<!-- Contacts Info -->
<div class="text-center py-5">
<figure id="icon16" class="svg-preloader ie-height-56 max-width-8 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-16.svg" alt="SVG"
data-parent="#icon16">
</figure>
<h3 class="h6 mb-0">Phone Number</h3>
<p class="mb-0">+1 (062) 109-9222</p>
</div>
<!-- End Contacts Info -->
</div>
<div class="col-sm-6 col-lg-3">
<!-- Contacts Info -->
<div class="text-center py-5">
<figure id="icon17" class="svg-preloader ie-height-56 max-width-8 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-17.svg" alt="SVG"
data-parent="#icon17">
</figure>
<h3 class="h6 mb-0">Fax</h3>
<p class="mb-0">+1 (062) 109-9223</p>
</div>
<!-- End Contacts Info -->
</div>
</div>
</div>
<!-- End Contacts Info 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>