Icon Blocks
Start building your website with dozens of ready-to-use icon blocks.
Left aligned #1
Can't find your answer?
We want to answer all of your queries. Get in touch and we'll get back to you as soon as we can.
Email us
Technical questions
Have some technical questions? Hit us on community page or just say hello.
Open ticket
<!-- Contacts Section -->
<div class="container">
<div class="row space-2">
<div class="col-lg-6 u-ver-divider u-ver-divider--none-lg mb-7 mb-lg-0">
<!-- Contacts Info -->
<div class="media pr-lg-9">
<figure id="icon15" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-15.svg" alt="SVG"
data-parent="#icon15">
</figure>
<div class="media-body">
<h3 class="h5">Can't find your answer?</h3>
<p class="mb-1">We want to answer all of your queries. Get in touch and we'll get back to you as soon as we can.</p>
<a class="font-size-1" href="#">Email us <span class="fas fa-angle-right align-middle ml-2"></span></a>
</div>
</div>
<!-- End Contacts Info -->
</div>
<div class="col-lg-6">
<!-- Contacts Info -->
<div class="media pl-lg-9">
<figure id="icon4" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-4.svg" alt="SVG"
data-parent="#icon4">
</figure>
<div class="media-body">
<h3 class="h5">Technical questions</h3>
<p class="mb-1">Have some technical questions? Hit us on community page or just say hello.</p>
<a class="font-size-1" href="#">Open ticket <span class="fas fa-angle-right align-middle ml-2"></span></a>
</div>
</div>
<!-- End Contacts Info -->
</div>
</div>
</div>
<!-- End Contacts 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>
Left aligned #2
This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is a key point.
Learn More
Now that we've aligned the details, it's time to get things mapped out and organized. This part is really crucial in keeping the project in line to completion.
Learn More
The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.
Learn More
Whether through commerce or just an experience to tell your brand's story, the time has come to start using development languages that fit your projects needs.
Learn More
Now that your brand is all dressed up and ready to party, it's time to release it to the world. By the way, let's celebrate already.
Learn More
We get it, you're busy and it is important that someone keep up with marketing and driving people to your brand. We've got you covered.
Learn More
It's important to stay detail oriented with every project we tackle. Staying focused allows us to turn every project we complete into something we love.
Learn More
We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.
Learn More
As creatives, it's important that we strive to do work outside of obligation. This lets us stay ahead of the curve for our clients and internal projects.
Learn More
<!-- Features Section -->
<div class="container space-2">
<div class="row">
<div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
<!-- Icon Block -->
<div class="pr-lg-4">
<figure id="icon2" class="svg-preloader ie-height-56 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-2.svg" alt="SVG"
data-parent="#icon2">
</figure>
<p>This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is a key point.</p>
<a href="#">Learn More</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
<!-- Icon Block -->
<div class="pr-lg-4">
<figure id="icon1" class="svg-preloader ie-height-56 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-1.svg" alt="SVG"
data-parent="#icon1">
</figure>
<p>Now that we've aligned the details, it's time to get things mapped out and organized. This part is really crucial in keeping the project in line to completion.</p>
<a href="#">Learn More</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
<!-- Icon Block -->
<div class="pr-lg-4">
<figure id="icon3" class="svg-preloader ie-height-56 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-3.svg" alt="SVG"
data-parent="#icon3">
</figure>
<p>The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
<a href="#">Learn More</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
<!-- Icon Block -->
<div class="pr-lg-4">
<figure id="icon4" class="svg-preloader ie-height-56 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-4.svg" alt="SVG"
data-parent="#icon4">
</figure>
<p>Whether through commerce or just an experience to tell your brand's story, the time has come to start using development languages that fit your projects needs.</p>
<a href="#">Learn More</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
<!-- Icon Block -->
<div class="pr-lg-4">
<figure id="icon5" class="svg-preloader ie-height-56 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-5.svg" alt="SVG"
data-parent="#icon5">
</figure>
<p>Now that your brand is all dressed up and ready to party, it's time to release it to the world. By the way, let's celebrate already.</p>
<a href="#">Learn More</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
<!-- Icon Block -->
<div class="pr-lg-4">
<figure id="icon6" class="svg-preloader ie-height-56 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-6.svg" alt="SVG"
data-parent="#icon6">
</figure>
<p>We get it, you're busy and it is important that someone keep up with marketing and driving people to your brand. We've got you covered.</p>
<a href="#">Learn More</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
<!-- Icon Block -->
<div class="pr-lg-4">
<figure id="icon7" class="svg-preloader ie-height-56 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-7.svg" alt="SVG"
data-parent="#icon7">
</figure>
<p>It's important to stay detail oriented with every project we tackle. Staying focused allows us to turn every project we complete into something we love.</p>
<a href="#">Learn More</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
<!-- Icon Block -->
<div class="pr-lg-4">
<figure id="icon8" class="svg-preloader ie-height-56 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-8.svg" alt="SVG"
data-parent="#icon8">
</figure>
<p>We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.</p>
<a href="#">Learn More</a>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-lg-4 mb-7 mb-sm-9 mb-lg-0">
<!-- Icon Block -->
<div class="pr-lg-4">
<figure id="icon9" class="svg-preloader ie-height-56 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-9.svg" alt="SVG"
data-parent="#icon9">
</figure>
<p>As creatives, it's important that we strive to do work outside of obligation. This lets us stay ahead of the curve for our clients and internal projects.</p>
<a href="#">Learn More</a>
</div>
<!-- End Icon Block -->
</div>
</div>
<!-- Divider -->
<div class="w-65 w-lg-50 mx-auto">
<hr class="mt-0 mb-9">
</div>
<!-- End Divider -->
<div class="text-center">
<a href="#" class="btn btn-primary transition-3d-hover">See all Features</a>
</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>
Left aligned #3
Call us
+1 (062) 109-9222Email us
support@htmlstream.comAddress
153 Williamson Plaza, Maggieberg
<!-- Icon Blocks -->
<div class="container space-2">
<div class="row">
<div class="col-md-4 mb-7 mb-md-0">
<!-- Contacts -->
<div class="media">
<span class="btn btn-icon btn-soft-primary rounded-circle mr-3">
<span class="fas fa-phone btn-icon__inner"></span>
</span>
<div class="media-body">
<h4 class="h6 text-secondary font-weight-normal mb-0">Call us</h4>
<span class="d-block font-size-1">+1 (062) 109-9222</span>
</div>
</div>
<!-- End Contacts -->
</div>
<div class="col-md-4 mb-7 mb-md-0">
<!-- Contacts -->
<div class="media">
<span class="btn btn-icon btn-soft-primary rounded-circle mr-3">
<span class="fas fa-envelope btn-icon__inner"></span>
</span>
<div class="media-body">
<h4 class="h6 text-secondary font-weight-normal mb-0">Email us</h4>
<span class="d-block font-size-1">support@htmlstream.com</span>
</div>
</div>
<!-- End Contacts -->
</div>
<div class="col-md-4">
<!-- Contacts -->
<div class="media">
<span class="btn btn-icon btn-soft-primary rounded-circle mr-3">
<span class="fas fa-map-marker-alt btn-icon__inner"></span>
</span>
<div class="media-body">
<h4 class="h6 text-secondary font-weight-normal mb-0">Address</h4>
<span class="d-block font-size-1">153 Williamson Plaza, Maggieberg</span>
</div>
</div>
<!-- End Contacts -->
</div>
</div>
</div>
<!-- End Icon Blocks -->
<!-- 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>
Left aligned #4
-
Email: natalie.curtis@gmail.com
-
Web page: www.htmlstream.com/natalie
-
Location: London, England
-
Birthday: May 3, 1986
-
Organization: Pixeel Ltd.
-
Phone number: +44 (0161) 347 8854
-
Language: English, French
-
<!-- Icon Blocks -->
<div class="container space-2">
<div class="row">
<div class="col-md-6 col-lg-4">
<!-- List Group -->
<ul class="list-group list-group-transparent list-group-flush list-group-borderless mb-0">
<li class="list-group-item pt-0 pb-4">
<div class="media">
<span class="fas fa-envelope list-group-icon mr-3"></span>
<div class="media-body text-lh-sm">
<span class="d-block mb-1">Email:</span>
<a href="#">natalie.curtis@gmail.com</a>
</div>
</div>
</li>
<li class="list-group-item pt-0 pb-4">
<div class="media">
<span class="fas fa-link list-group-icon mr-3"></span>
<div class="media-body text-lh-sm">
<span class="d-block mb-1">Web page:</span>
<a href="#">www.htmlstream.com/natalie</a>
</div>
</div>
</li>
<li class="list-group-item pt-0 pb-4">
<div class="media">
<span class="fas fa-map-marker-alt list-group-icon mr-3"></span>
<div class="media-body text-lh-sm">
<span class="d-block mb-1">Location:</span>
<a href="#">London, England</a>
</div>
</div>
</li>
</ul>
<!-- End List Group -->
</div>
<div class="col-md-6 col-lg-4">
<!-- List Group -->
<ul class="list-group list-group-transparent list-group-flush list-group-borderless mb-0">
<li class="list-group-item pt-0 pb-4">
<div class="media">
<span class="fas fa-birthday-cake list-group-icon mr-3"></span>
<div class="media-body text-lh-sm">
<span class="d-block mb-1">Birthday:</span>
<span class="d-block text-muted">May 3, 1986</span>
</div>
</div>
</li>
<li class="list-group-item pt-0 pb-4">
<div class="media">
<span class="fas fa-building list-group-icon mr-3"></span>
<div class="media-body text-lh-sm">
<span class="d-block mb-1">Organization:</span>
<a href="#">Pixeel Ltd.</a>
</div>
</div>
</li>
<li class="list-group-item pt-0 pb-4">
<div class="media">
<span class="fas fa-mobile-alt list-group-icon mr-3"></span>
<div class="media-body text-lh-sm">
<span class="d-block mb-1">Phone number:</span>
<a href="#">+44 (0161) 347 8854</a>
</div>
</div>
</li>
</ul>
<!-- End List Group -->
</div>
<div class="col-md-6 col-lg-4">
<!-- List Group -->
<ul class="list-group list-group-transparent list-group-flush list-group-borderless mb-0">
<li class="list-group-item pt-0 pb-4">
<div class="media">
<span class="fas fa-globe list-group-icon mr-3"></span>
<div class="media-body text-lh-sm">
<span class="d-block mb-1">Language:</span>
<span class="d-block text-muted">English, French</span>
</div>
</div>
</li>
<li class="list-group-item pt-0 pb-4">
<div class="media">
<span class="fas fa-tags list-group-icon mr-3"></span>
<div class="media-body text-lh-sm">
<span class="d-block mb-1">Skills:</span>
<a href="#">HTML5,</a>
<a href="#">CSS3,</a>
<a href="#">JavaScript,</a>
<a href="#">jQuery</a>
</div>
</div>
</li>
</ul>
<!-- End List Group -->
</div>
</div>
</div>
<!-- End Icon Blocks -->
Left aligned #5
Flexible planning
Front Software's rich planning features enable your team to flexibly plan.
Accurate estimations
Use story points, hours, t-shirt sizes, or your own estimation technique.
Value-driven prioritization
Order user stories, issues, and bugs in your product backlog with simple dragging.
Transparent execution
Front Software brings a new level of transparency to your team's work.
Actionable results
Extensive reporting functionality gives your team critical insight into their agile process.
Scalable evolution
Front Software is agile project management designed for any teams.
Start free trial. * No credit card required.
<!-- Features Section -->
<div class="container space-2 space-lg-3">
<!-- Icon Blocks -->
<div class="row mb-9">
<div class="col-sm-6 col-md-4 mb-7">
<!-- Icon Block -->
<div class="media align-items-center mb-2">
<figure id="iconExample15-29" class="svg-preloader ie-height-40 w-100 max-width-6 mr-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-29.svg" alt="SVG"
data-parent="#iconExample15-29">
</figure>
<div class="media-body">
<h4 class="h6 mb-0">Flexible planning</h4>
</div>
</div>
<p>Front Software's rich planning features enable your team to flexibly plan.</p>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-md-4 mb-7">
<!-- Icon Block -->
<div class="media align-items-center mb-2">
<figure id="iconExample15-26" class="svg-preloader ie-height-40 w-100 max-width-6 mr-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-26.svg" alt="SVG"
data-parent="#iconExample15-26">
</figure>
<div class="media-body">
<h4 class="h6 mb-0">Accurate estimations</h4>
</div>
</div>
<p>Use story points, hours, t-shirt sizes, or your own estimation technique.</p>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-md-4 mb-7 mb-md-0">
<!-- Icon Block -->
<div class="media align-items-center mb-2">
<figure id="iconExample15-31" class="svg-preloader ie-height-40 w-100 max-width-6 mr-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-31.svg" alt="SVG"
data-parent="#iconExample15-31">
</figure>
<div class="media-body">
<h4 class="h6 mb-0">Value-driven prioritization</h4>
</div>
</div>
<p>Order user stories, issues, and bugs in your product backlog with simple dragging.</p>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-md-4 mb-7 mb-md-0">
<!-- Icon Block -->
<div class="media align-items-center mb-2">
<figure id="iconExample15-37" class="svg-preloader ie-height-40 w-100 max-width-6 mr-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-37.svg" alt="SVG"
data-parent="#iconExample15-37">
</figure>
<div class="media-body">
<h4 class="h6 mb-0">Transparent execution</h4>
</div>
</div>
<p>Front Software brings a new level of transparency to your team's work.</p>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-md-4 mb-7 mb-md-0">
<!-- Icon Block -->
<div class="media align-items-center mb-2">
<figure id="iconExample15-5" class="svg-preloader ie-height-40 w-100 max-width-6 mr-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-5.svg" alt="SVG"
data-parent="#iconExample15-5">
</figure>
<div class="media-body">
<h4 class="h6 mb-0">Actionable results</h4>
</div>
</div>
<p>Extensive reporting functionality gives your team critical insight into their agile process.</p>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 col-md-4">
<!-- Icon Block -->
<div class="media align-items-center mb-2">
<figure id="iconExample15-28" class="svg-preloader ie-height-40 w-100 max-width-6 mr-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-28.svg" alt="SVG"
data-parent="#iconExample15-28">
</figure>
<div class="media-body">
<h4 class="h6 mb-0">Scalable evolution</h4>
</div>
</div>
<p>Front Software is agile project management designed for any teams.</p>
<!-- End Icon Block -->
</div>
</div>
<!-- End Icon Blocks -->
<div class="text-center">
<div class="mb-3">
<a class="btn btn-primary btn-wide transition-3d-hover mb-2 mb-sm-0 mx-1" href="#">Sign up and Start Building</a>
<a class="btn btn-outline-primary btn-wide transition-3d-hover mb-2 mb-sm-0 mx-1" href="#">Let's Talk</a>
</div>
<p class="small">Start free trial. * No credit card required.</p>
</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>
Left aligned #6
Responsive
Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.
Explore now
Customizable
Front template can be easily customized with its cutting-edge components and features.
Explore now
Premium
Front is not only for developers but also for designers, and includes a Sketch file.
Explore now
<!-- Icon Blocks Section -->
<div class="container space-2">
<div class="row justify-content-lg-center">
<div class="col-md-6 col-lg-5 mb-7">
<!-- Icon Blocks -->
<div class="media pr-lg-5">
<figure id="icon9" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-9.svg" alt="SVG"
data-parent="#icon9">
</figure>
<div class="media-body">
<h3 class="h5">Responsive</h3>
<p class="mb-1">Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.</p>
<a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
</div>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-md-6 col-lg-5 mb-7">
<!-- Icon Blocks -->
<div class="media pl-lg-5">
<figure id="icon3" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-3.svg" alt="SVG"
data-parent="#icon3">
</figure>
<div class="media-body">
<h3 class="h5">Customizable</h3>
<p class="mb-1">Front template can be easily customized with its cutting-edge components and features.</p>
<a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
</div>
</div>
<!-- End Icon Blocks -->
</div>
<div class="w-100"></div>
<div class="col-md-6 col-lg-5 mb-7 mb-lg-0">
<!-- Icon Blocks -->
<div class="media pr-lg-5">
<figure id="icon5" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-5.svg" alt="SVG"
data-parent="#icon5">
</figure>
<div class="media-body">
<h3 class="h5">Premium</h3>
<p class="mb-1">Front is not only for developers but also for designers, and includes a Sketch file.</p>
<a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
</div>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-md-6 col-lg-5">
<!-- Icon Blocks -->
<div class="media pl-lg-5">
<figure id="icon2" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-2.svg" alt="SVG"
data-parent="#icon2">
</figure>
<div class="media-body">
<h3 class="h5">Documentation <span class="badge badge-success font-weight-medium badge-pill ml-1">v2.0</span></h3>
<p class="mb-1">Every component and plugin is well documented with live examples.</p>
<a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
</div>
</div>
<!-- End Icon Blocks -->
</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>
Left aligned #7
What we do?
More control and greater overview from simple, powerful features
This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.
Marketing
Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.
Clean design
Front template can be easily customized with its cutting-edge components and features.
Social services beta
Front is not only for developers but also for designers, and includes a Sketch file.
Creative ideas
Every component and plugin is well documented with live examples.
<!-- What We Do Section -->
<div class="container space-2">
<div class="row justify-content-lg-between">
<div class="col-lg-4 mb-7 mb-lg-0">
<!-- Title -->
<small class="text-secondary text-uppercase font-weight-medium mb-2">What we do?</small>
<h3 class="font-weight-medium">More control and greater overview from simple, powerful features</h3>
<p>This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
<!-- End Title -->
</div>
<div class="col-lg-7">
<div class="row">
<div class="col-sm-6 mb-3">
<!-- Icon Blocks -->
<figure id="icon26" class="svg-preloader ie-height-56 w-100 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-26.svg" alt="SVG"
data-parent="#icon26">
</figure>
<h4 class="h5">Marketing</h4>
<p class="font-size-1">Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.</p>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 mb-3">
<!-- Icon Blocks -->
<figure id="icon27" class="svg-preloader ie-height-56 w-100 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-27.svg" alt="SVG"
data-parent="#icon27">
</figure>
<h4 class="h5">Clean design</h4>
<p class="font-size-1">Front template can be easily customized with its cutting-edge components and features.</p>
<!-- End Icon Blocks -->
</div>
<div class="w-100"></div>
<div class="col-sm-6 mb-3 mb-sm-0">
<!-- Icon Blocks -->
<figure id="icon25" class="svg-preloader ie-height-56 w-100 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-25.svg" alt="SVG"
data-parent="#icon25">
</figure>
<h4 class="h5">Social services <span class="badge badge-success font-weight-medium badge-pill ml-1">beta</span></h4>
<p class="font-size-1">Front is not only for developers but also for designers, and includes a Sketch file.</p>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6">
<!-- Icon Blocks -->
<figure id="icon28" class="svg-preloader ie-height-56 w-100 max-width-8 mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-28.svg" alt="SVG"
data-parent="#icon28">
</figure>
<h4 class="h5">Creative ideas</h4>
<p class="font-size-1">Every component and plugin is well documented with live examples.</p>
<!-- End Icon Blocks -->
</div>
</div>
</div>
</div>
</div>
<!-- End What We Do Section -->
Left aligned #8
Go Front with ease.
Whether you’re a seasoned agile expert, or just getting started, Jira Software unlocks the power of agile.
Flexible planning
Front Software's rich planning features enable your team to flexibly plan.
Accurate estimations
Use story points, hours, t-shirt sizes, or your own estimation technique.
Value-driven prioritization
Order user stories, issues, and bugs in your product backlog with simple dragging.
Transparent execution
Front Software brings a new level of transparency to your team's work.
Actionable results
Extensive reporting functionality gives your team critical insight into their agile process.
Scalable evolution Coming soon
Front Software is agile project management designed for any teams.
Start free trial. * No credit card required.
<!-- Icons Section -->
<div class="position-relative gradient-overlay-half-primary-v3 overflow-hidden">
<div class="container space-top-2 space-top-lg-3">
<!-- Title -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-9">
<h2 class="text-white font-weight-medium">Go Front with ease.</h2>
<p class="text-white-70">Whether you’re a seasoned agile expert, or just getting started, Jira Software unlocks the power of agile.</p>
</div>
<!-- End Title -->
<!-- Icon Blocks -->
<div class="w-lg-80 mx-lg-auto mb-11">
<div class="row mb-9">
<div class="col-6 col-md-4 mb-7">
<!-- Icon Block -->
<span class="d-block text-white font-size-2 mb-3">
<span class="fas fa-align-center"></span>
</span>
<h4 class="h6 text-white font-weight-semi-bold mb-3">Flexible planning</h4>
<p class="text-white-70">Front Software's rich planning features enable your team to flexibly plan.</p>
<!-- End Icon Block -->
</div>
<div class="col-6 col-md-4 mb-7">
<!-- Icon Block -->
<span class="d-block text-white font-size-2 mb-3">
<span class="fas fa-code-branch"></span>
</span>
<h4 class="h6 text-white font-weight-semi-bold mb-3">Accurate estimations</h4>
<p class="text-white-70">Use story points, hours, t-shirt sizes, or your own estimation technique.</p>
<!-- End Icon Block -->
</div>
<div class="col-6 col-md-4 mb-7 mb-md-0">
<!-- Icon Block -->
<span class="d-block text-white font-size-2 mb-3">
<span class="fas fa-shapes"></span>
</span>
<h4 class="h6 text-white font-weight-semi-bold mb-3">Value-driven prioritization</h4>
<p class="text-white-70">Order user stories, issues, and bugs in your product backlog with simple dragging.</p>
<!-- End Icon Block -->
</div>
<div class="col-6 col-md-4 mb-7 mb-md-0">
<!-- Icon Block -->
<span class="d-block text-white font-size-2 mb-3">
<span class="fas fa-clone"></span>
</span>
<h4 class="h6 text-white font-weight-semi-bold mb-3">Transparent execution</h4>
<p class="text-white-70">Front Software brings a new level of transparency to your team's work.</p>
<!-- End Icon Block -->
</div>
<div class="col-6 col-md-4">
<!-- Icon Block -->
<span class="d-block text-white font-size-2 mb-3">
<span class="fas fa-check-circle"></span>
</span>
<h4 class="h6 text-white font-weight-semi-bold mb-3">Actionable results</h4>
<p class="text-white-70">Extensive reporting functionality gives your team critical insight into their agile process.</p>
<!-- End Icon Block -->
</div>
<div class="col-6 col-md-4">
<!-- Icon Block -->
<span class="d-block text-white font-size-2 mb-3">
<span class="fas fa-compress"></span>
</span>
<h4 class="h6 text-white font-weight-semi-bold mb-3">Scalable evolution <span class="badge badge-warning font-weight-medium badge-pill ml-1">Coming soon</span></h4>
<p class="text-white-70">Front Software is agile project management designed for any teams.</p>
<!-- End Icon Block -->
</div>
</div>
<!-- Buttons -->
<div class="text-center">
<div class="mb-3">
<a class="btn btn-sm btn-white btn-wide text-primary transition-3d-hover" href="#">Sign up and Start Building</a>
<small class="d-block d-sm-inline-block text-white-70 my-3 my-sm-0 mx-sm-3">or</small>
<a class="btn btn-sm btn-indigo btn-wide transition-3d-hover" href="#">Talk to our Experts</a>
</div>
<p class="small text-white-70">Start free trial. * No credit card required.</p>
</div>
<!-- End Buttons -->
</div>
<!-- End Icon Blocks -->
<div class="w-85 w-md-75 w-lg-65 text-center mx-auto">
<img class="img-fluid" src="../../assets/svg/illustrations/ai-creation.svg" alt="Image Description">
</div>
</div>
<!-- SVG Background Shape -->
<figure class="w-35 position-absolute top-0 right-0 z-index-n1">
<div class="mt-n11 mr-n11">
<img class="js-svg-injector" src="../../assets/svg/components/half-circle-3.svg" alt="Image Description"
data-parent="#SVGHero">
</div>
</figure>
<figure class="w-25 position-absolute bottom-0 left-0 z-index-n1">
<div class="mb-n11 ml-n11">
<img class="js-svg-injector" src="../../assets/svg/components/half-circle-2.svg" alt="Image Description"
data-parent="#SVGHero">
</div>
</figure>
<!-- End SVG Background Shape -->
</div>
<!-- End Icons 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>
Left aligned #9
Veteran Hiring Commitment
Committed to helping America's military veterans find work.
Social Responsibility Pledge
Formal programs or foundation to give back to communities.
Diversity Commitment
Has programs that support a diverse and inclusive workforce.
Pledge to Thrive
Taking steps to prioritize employee well-being.
<div class="row">
<div class="col-sm-6 mb-5">
<!-- Icon Block -->
<div class="media">
<figure id="iconExample21" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/medal.svg" alt="SVG"
data-parent="#iconExample21">
</figure>
<div class="media-body">
<h3 class="h6 mb-1">Veteran Hiring Commitment</h3>
<p>Committed to helping America's military veterans find work.</p>
</div>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6 mb-5">
<!-- Icon Block -->
<div class="media">
<figure id="iconExample25" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/social-responsibility.svg" alt="SVG"
data-parent="#iconExample25">
</figure>
<div class="media-body">
<h4 class="h6 mb-1">Social Responsibility Pledge</h4>
<p>Formal programs or foundation to give back to communities.</p>
</div>
</div>
<!-- End Icon Block -->
</div>
<div class="w-100"></div>
<div class="col-sm-6 mb-5 mb-sm-0">
<!-- Icon Block -->
<div class="media">
<figure id="iconExample7" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/diversity.svg" alt="SVG"
data-parent="#iconExample7">
</figure>
<div class="media-body">
<h4 class="h6 mb-1">Diversity Commitment</h4>
<p>Has programs that support a diverse and inclusive workforce.</p>
</div>
</div>
<!-- End Icon Block -->
</div>
<div class="col-sm-6">
<!-- Icon Block -->
<div class="media">
<figure id="iconExample29" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/growth.svg" alt="SVG"
data-parent="#iconExample29">
</figure>
<div class="media-body">
<h4 class="h6 mb-1">Pledge to Thrive</h4>
<p>Taking steps to prioritize employee well-being.</p>
</div>
</div>
<!-- End Icon Block -->
</div>
</div>
<!-- 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>