Icon Blocks

Start building your website with dozens of ready-to-use icon blocks.

Icon blocks #1

Image Description

Professional Design

Achieve virtually any look and layout from within the one template.

Image Description

Super-Light

Manage document assembly with sophisticated yet super-light templates.

Image Description

Unlimited Power

Find what you need in one template and combine features at will.

              
                <!-- Icon Blocks Section -->
                <div class="container space-2 space-3--lg">
                  <div class="row">
                    <div class="col-md-4 mb-7 mb-md-0">
                      <!-- Icon Blocks -->
                      <div class="text-center px-lg-3">
                        <img class="max-width-14 mb-2" src="../assets/svg/components/trophy-purple-icon.svg" alt="Image Description">
                        <h3 class="h4">Professional Design</h3>
                        <p class="mb-0">Achieve virtually any look and layout from within the one template.</p>
                      </div>
                      <!-- End Icon Blocks -->
                    </div>

                    <div class="col-md-4 mb-7 mb-md-0">
                      <!-- Icon Blocks -->
                      <div class="text-center px-lg-3">
                        <img class="max-width-14 mb-2" src="../assets/svg/components/idea-primary-icon.svg" alt="Image Description">
                        <h3 class="h4">Super-Light</h3>
                        <p class="mb-0">Manage document assembly with sophisticated yet super-light templates.</p>
                      </div>
                      <!-- End Icon Blocks -->
                    </div>

                    <div class="col-md-4">
                      <!-- Icon Blocks -->
                      <div class="text-center px-lg-3">
                        <img class="max-width-14 mb-2" src="../assets/svg/components/rocket-red-icon.svg" alt="Image Description">
                        <h3 class="h4">Unlimited Power</h3>
                        <p class="mb-0">Find what you need in one template and combine features at will.</p>
                      </div>
                      <!-- End Icon Blocks -->
                    </div>
                  </div>
                </div>
                <!-- End Icon Blocks Section -->
              
            

Icon blocks #2

              
                <!-- Icon Blocks Section -->
                <div class="bg-gray-100">
                  <div class="container space-2 space-3--lg">
                    <div class="row justify-content-center">
                      <div class="col-6 col-sm-4 col-lg mb-5 mb-lg-0">
                        <!-- Icon Block -->
                        <a class="d-block card-frame bg-white text-center rounded py-7 px-5" href="#">
                          <img class="d-block max-width-12 mx-auto mb-4" src="../assets/svg/components/plan-brown-icon.svg" alt="SVG">
                          <h3 class="h6 text-dark mb-0">Marketing</h3>
                        </a>
                        <!-- End Icon Block -->
                      </div>

                      <div class="col-6 col-sm-4 col-lg mb-5 mb-sm-0">
                        <!-- Icon Block -->
                        <a class="d-block card-frame bg-white text-center rounded py-7 px-5" href="#">
                          <img class="d-block max-width-12 mx-auto mb-4" src="../assets/svg/components/cog-primary-icon.svg" alt="SVG">
                          <h3 class="h6 text-dark mb-0">Operations</h3>
                        </a>
                        <!-- End Icon Block -->
                      </div>

                      <div class="col-6 col-sm-4 col-lg mb-5 mb-sm-0">
                        <!-- Icon Block -->
                        <a class="d-block card-frame bg-white text-center rounded py-7 px-5" href="#">
                          <img class="d-block max-width-12 mx-auto mb-4" src="../assets/svg/components/arrow-red-icon.svg" alt="SVG">
                          <h3 class="h6 text-dark mb-0">HR</h3>
                        </a>
                        <!-- End Icon Block -->
                      </div>

                      <div class="col-6 col-sm-4 col-lg mb-5 mb-sm-0">
                        <!-- Icon Block -->
                        <a class="d-block card-frame bg-white text-center rounded py-7 px-5" href="#">
                          <img class="d-block max-width-12 mx-auto mb-4" src="../assets/svg/components/legal-purple-icon.svg" alt="SVG">
                          <h3 class="h6 text-dark mb-0">Legal</h3>
                        </a>
                        <!-- End Icon Block -->
                      </div>

                      <div class="col-6 col-sm-4 col-lg">
                        <!-- Icon Block -->
                        <a class="d-block card-frame bg-white text-center rounded py-7 px-5" href="#">
                          <img class="d-block max-width-12 mx-auto mb-4" src="../assets/svg/components/finance-blue-icon.svg" alt="SVG">
                          <h3 class="h6 text-dark mb-0">Finance</h3>
                        </a>
                        <!-- End Icon Block -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Icon Blocks Section -->
              
            

Icon blocks #3

Image Description

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 key.

Learn More
Image Description

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
Image Description

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
Image Description

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
              
                <div class="row">
                  <div class="col-sm-6 mb-7 mb-sm-9">
                    <!-- Icon Block -->
                    <div class="pr-lg-4">
                      <img class="max-width-9 mb-2" src="../assets/svg/components/consult-primary-icon.svg" alt="Image Description">
                      <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 key.</p>
                      <a href="#">
                        Learn More
                        <span class="fa fa-angle-right align-middle ml-2"></span>
                      </a>
                    </div>
                    <!-- End Icon Block -->
                  </div>

                  <div class="col-sm-6 mb-7 mb-sm-9">
                    <!-- Icon Block -->
                    <div class="pr-lg-4">
                      <img class="max-width-9 mb-2" src="../assets/svg/components/plan-brown-icon.svg" alt="Image Description">
                      <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
                        <span class="fa fa-angle-right align-middle ml-2"></span>
                      </a>
                    </div>
                    <!-- End Icon Block -->
                  </div>

                  <div class="col-sm-6 mb-7 mb-sm-0">
                    <!-- Icon Block -->
                    <div class="pr-lg-4">
                      <img class="max-width-9 mb-2" src="../assets/svg/components/create-blue-icon.svg" alt="Image Description">
                      <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
                        <span class="fa fa-angle-right align-middle ml-2"></span>
                      </a>
                    </div>
                    <!-- End Icon Block -->
                  </div>

                  <div class="col-sm-6">
                    <!-- Icon Block -->
                    <div class="pr-lg-4">
                      <img class="max-width-9 mb-2" src="../assets/svg/components/develop-purple-icon.svg" alt="Image Description">
                      <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
                        <span class="fa fa-angle-right align-middle ml-2"></span>
                      </a>
                    </div>
                    <!-- End Icon Block -->
                  </div>
                </div>
              
            

Icon blocks #4

              
                <div class="card-deck d-block d-lg-flex card-lg-gutters-2">
                  <div class="card card-frame mb-3">
                    <!-- Listing -->
                    <a class="card-body p-4" href="#">
                      <div class="media">
                        <img class="max-width-9 mb-2" src="../assets/svg/components/consult-cyan-icon.svg" alt="Image Description">
                        <div class="media-body px-4">
                          <h4 class="h6 text-dark mb-1">Consult</h4>
                          <p class="mb-0">This is where we sit down, grab a cup of coffee and dial in the details.</p>
                        </div>
                      </div>
                    </a>
                    <!-- End Listing -->
                  </div>

                  <div class="card card-frame mb-3">
                    <!-- Listing -->
                    <a class="card-body p-4" href="#">
                      <div class="media">
                        <img class="max-width-9 mb-2" src="../assets/svg/components/plan-brown-icon.svg" alt="Image Description">
                        <div class="media-body px-4">
                          <h4 class="h6 text-dark mb-1">Plan</h4>
                          <p>Now that we've aligned the details, it's time to get things mapped out and organized.</p>
                        </div>
                      </div>
                    </a>
                    <!-- End Listing -->
                  </div>

                  <div class="card card-frame mb-3">
                    <!-- Listing -->
                    <a class="card-body p-4" href="#">
                      <div class="media">
                        <img class="max-width-9 mb-2" src="../assets/svg/components/create-blue-icon.svg" alt="Image Description">
                        <div class="media-body px-4">
                          <h4 class="h6 text-dark mb-1">Create</h4>
                          <p>The time has come to bring those ideas and plans to life.</p>
                        </div>
                      </div>
                    </a>
                    <!-- End Listing -->
                  </div>
                </div>

                <div class="card-deck d-block d-lg-flex card-lg-gutters-2">
                  <div class="card card-frame mb-3">
                    <!-- Listing -->
                    <a class="card-body p-4" href="#">
                      <div class="media">
                        <img class="max-width-9 mb-2" src="../assets/svg/components/develop-purple-icon.svg" alt="Image Description">
                        <div class="media-body px-4">
                          <h4 class="h6 text-dark mb-1">Develop</h4>
                          <p>Whether through commerce or just an experience to tell your brand's story.</p>
                        </div>
                      </div>
                    </a>
                    <!-- End Listing -->
                  </div>

                  <div class="card card-frame mb-3">
                    <!-- Listing -->
                    <a class="card-body p-4" href="#">
                      <div class="media">
                        <img class="max-width-9 mb-2" src="../assets/svg/components/rocket-red-icon.svg" alt="Image Description">
                        <div class="media-body px-4">
                          <h4 class="h6 text-dark mb-1">Release</h4>
                          <p>Now that your brand is all dressed up and ready to party.</p>
                        </div>
                      </div>
                    </a>
                    <!-- End Listing -->
                  </div>

                  <div class="card card-frame mb-3">
                    <!-- Listing -->
                    <a class="card-body p-4" href="#">
                      <div class="media">
                        <img class="max-width-9 mb-2" src="../assets/svg/components/data-analysis-dark-icon.svg" alt="Image Description">
                        <div class="media-body px-4">
                          <h4 class="h6 text-dark mb-1">Maintain</h4>
                          <p>We get it, you're busy and it's important that someone keeps up with marketing.</p>
                        </div>
                      </div>
                    </a>
                    <!-- End Listing -->
                  </div>
                </div>
              
            

Icon blocks #5

Image Description

Consult

This is where we sit down, grab a cup of coffee and dial in the details.

Image Description

Plan

Now that we've aligned the details, it's time to get things mapped out and organized.

Image Description

Create

The time has come to bring those ideas and plans to life.

Image Description

Develop

Whether through commerce or just an experience to tell your brand's story.

Image Description

Release

Now that your brand is all dressed up and ready to party.

Image Description

Maintain

We get it, you're busy and it's important that someone keeps up with marketing.

              
                <!-- Features Section -->
                <div class="container position-relative z-index-2">
                  <div class="bg-gray-100 shadow-lg rounded mt-offset-9">
                    <div class="card-deck d-block d-lg-flex card-lg-gutters-1">
                      <div class="card border-0 mb-2">
                        <!-- Listing -->
                        <div class="card-body p-4">
                          <div class="media">
                            <img class="max-width-9 mb-2" src="../assets/svg/components/consult-cyan-icon.svg" alt="Image Description">
                            <div class="media-body px-4">
                              <h2 class="h6 text-dark mb-1">Consult</h2>
                              <p class="mb-0">This is where we sit down, grab a cup of coffee and dial in the details.</p>
                            </div>
                          </div>
                        </div>
                        <!-- End Listing -->
                      </div>

                      <div class="card border-0 mb-2">
                        <!-- Listing -->
                        <div class="card-body p-4">
                          <div class="media">
                            <img class="max-width-9 mb-2" src="../assets/svg/components/plan-brown-icon.svg" alt="Image Description">
                            <div class="media-body px-4">
                              <h3 class="h6 text-dark mb-1">Plan</h3>
                              <p class="mb-0">Now that we've aligned the details, it's time to get things mapped out and organized.</p>
                            </div>
                          </div>
                        </div>
                        <!-- End Listing -->
                      </div>

                      <div class="card border-0 mb-2">
                        <!-- Listing -->
                        <div class="card-body p-4">
                          <div class="media">
                            <img class="max-width-9 mb-2" src="../assets/svg/components/create-blue-icon.svg" alt="Image Description">
                            <div class="media-body px-4">
                              <h4 class="h6 text-dark mb-1">Create</h4>
                              <p class="mb-0">The time has come to bring those ideas and plans to life.</p>
                            </div>
                          </div>
                        </div>
                        <!-- End Listing -->
                      </div>
                    </div>

                    <div class="card-deck d-block d-lg-flex card-lg-gutters-1">
                      <div class="card border-0 mb-2 mb-lg-0">
                        <!-- Listing -->
                        <div class="card-body p-4">
                          <div class="media">
                            <img class="max-width-9 mb-2" src="../assets/svg/components/develop-purple-icon.svg" alt="Image Description">
                            <div class="media-body px-4">
                              <h4 class="h6 text-dark mb-1">Develop</h4>
                              <p class="mb-0">Whether through commerce or just an experience to tell your brand's story.</p>
                            </div>
                          </div>
                        </div>
                        <!-- End Listing -->
                      </div>

                      <div class="card border-0 mb-2 mb-lg-0">
                        <!-- Listing -->
                        <div class="card-body p-4">
                          <div class="media">
                            <img class="max-width-9 mb-2" src="../assets/svg/components/rocket-red-icon.svg" alt="Image Description">
                            <div class="media-body px-4">
                              <h4 class="h6 text-dark mb-1">Release</h4>
                              <p class="mb-0">Now that your brand is all dressed up and ready to party.</p>
                            </div>
                          </div>
                        </div>
                        <!-- End Listing -->
                      </div>

                      <div class="card border-0 mb-0">
                        <!-- Listing -->
                        <div class="card-body p-4">
                          <div class="media">
                            <img class="max-width-9 mb-2" src="../assets/svg/components/data-analysis-dark-icon.svg" alt="Image Description">
                            <div class="media-body px-4">
                              <h4 class="h6 text-dark mb-1">Maintain</h4>
                              <p class="mb-0">We get it, you're busy and it's important that someone keeps up with marketing.</p>
                            </div>
                          </div>
                        </div>
                        <!-- End Listing -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Features Section -->
              
            

Icon blocks #6

Image Description

Branding

Using our creative works drives this branding foundation.

Learn More
Image Description

Documentation

Read the developer's guide to the Space to get started on your integration.

Learn More
Image Description

News

See the latest updates to our features, designs and many more.

Learn More
              
                <!-- Features Section -->
                <div class="container text-center space-2 space-3--lg">
                  <div class="row">
                    <div class="col-sm-6 col-lg-4 offset-sm-3 offset-lg-0 order-lg-2 mb-7 mb-sm-0">
                      <!-- Icon Block -->
                      <div class="bg-primary text-center rounded py-9 p-5">
                        <img class="max-width-10 mb-2" src="../assets/svg/components/branding-white-icon.svg" alt="Image Description">
                        <h2 class="h4 text-white">Branding</h2>
                        <p class="text-white">Using our creative works drives this branding foundation.</p>
                        <a class="text-white" href="#">
                          Learn More
                          <span class="fa fa-angle-right align-middle ml-2"></span>
                        </a>
                      </div>
                      <!-- End Icon Block -->
                    </div>

                    <div class="col-sm-6 col-lg-4 order-lg-1">
                      <!-- Icon Block -->
                      <div class="text-center py-sm-9 p-5">
                        <img class="max-width-10 mb-2" src="../assets/svg/components/documentation-primary-icon.svg" alt="Image Description">
                        <h2 class="h4 text-dark">Documentation</h2>
                        <p>Read the developer's guide to the Space to get started on your integration.</p>
                        <a href="#">
                          Learn More
                          <span class="fa fa-angle-right align-middle ml-2"></span>
                        </a>
                      </div>
                      <!-- End Icon Block -->
                    </div>

                    <div class="col-sm-6 col-lg-4 order-lg-3">
                      <!-- Icon Block -->
                      <div class="text-center py-sm-9 p-5">
                        <img class="max-width-10 mb-2" src="../assets/svg/components/news-primary-icon.svg" alt="Image Description">
                        <h2 class="h4 text-dark">News</h2>
                        <p>See the latest updates to our features, designs and many more.</p>
                        <a href="#">
                          Learn More
                          <span class="fa fa-angle-right align-middle ml-2"></span>
                        </a>
                      </div>
                      <!-- End Icon Block -->
                    </div>
                  </div>
                </div>
                <!-- End Features Section -->
              
            

Icon blocks #7

              
                <div class="card-deck card-sm-gutters-2">
                  <!-- Features -->
                  <a class="card card-frame mb-3" href="../html/pages/about-agency.html">
                    <div class="card-body p-3">
                      <div class="media">
                        <img class="max-width-6 mr-3" src="../assets/svg/components/plan-brown-icon.svg" alt="Image Description">
                        <div class="media-body">
                          <h4 class="h6 text-dark mb-0">About</h4>
                          <p class="small mb-0">Find out more about us</p>
                        </div>
                      </div>
                    </div>
                  </a>
                  <!-- End Features -->

                  <!-- Features -->
                  <a class="card card-frame mb-3" href="../html/pages/services-agency.html">
                    <div class="card-body p-3">
                      <div class="media">
                        <img class="max-width-6 mr-3" src="../assets/svg/components/services-primary-icon.svg" alt="Image Description">
                        <div class="media-body">
                          <h4 class="h6 text-dark mb-0">Services</h4>
                          <p class="small mb-0">Find out more about services</p>
                        </div>
                      </div>
                    </div>
                  </a>
                  <!-- End Features -->
                </div>

                <div class="card-deck card-sm-gutters-2">
                  <!-- Features -->
                  <a class="card card-frame mb-3" href="../html/pages/careers.html">
                    <div class="card-body p-3">
                      <div class="media">
                        <img class="max-width-6 mr-3" src="../assets/svg/components/careers-blue-icon.svg" alt="Image Description">
                        <div class="media-body">
                          <h4 class="h6 text-dark mb-0">Careers</h4>
                          <p class="small mb-0">Start a career at Space</p>
                        </div>
                      </div>
                    </div>
                  </a>
                  <!-- End Features -->

                  <!-- Features -->
                  <a class="card card-frame mb-3" href="../html/pages/hire-us.html">
                    <div class="card-body p-3">
                      <div class="media">
                        <img class="max-width-6 mr-3" src="../assets/svg/components/hire-us-red-icon.svg" alt="Image Description">
                        <div class="media-body">
                          <h4 class="h6 text-dark mb-0">Hire us</h4>
                          <p class="small mb-0">Hire us to create your brand</p>
                        </div>
                      </div>
                    </div>
                  </a>
                  <!-- End Features -->
                </div>

                <div class="card-deck card-sm-gutters-2">
                  <!-- Features -->
                  <a class="card card-frame mb-3 mb-sm-0" href="../html/pages/help.html">
                    <div class="card-body p-3">
                      <div class="media">
                        <img class="max-width-6 mr-3" src="../assets/svg/components/help-cyan-icon.svg" alt="Image Description">
                        <div class="media-body">
                          <h4 class="h6 text-dark mb-0">Help</h4>
                          <p class="small mb-0">See our Help center for FAQ</p>
                        </div>
                      </div>
                    </div>
                  </a>
                  <!-- End Features -->

                  <!-- Features -->
                  <a class="card card-frame" href="../html/pages/contacts-agency.html">
                    <div class="card-body p-3">
                      <div class="media">
                        <img class="max-width-6 mr-3" src="../assets/svg/components/contacts-dark-icon.svg" alt="Image Description">
                        <div class="media-body">
                          <h4 class="h6 text-dark mb-0">Contacts</h4>
                          <p class="small mb-0">Have a question? Contacts us</p>
                        </div>
                      </div>
                    </div>
                  </a>
                  <!-- End Features -->
                </div>
              
            

Icon blocks #8

Why do you need it?

All the information you need at your fingertips

Choose what information is displayed on your Summary page. Create templates that work for you and your practice. You can even customize and update them on the fly! Edit and manage Case.one to truly fit your needs as your practice grows.

Image Description
              
                <!-- Features Section -->
                <div class="container">
                  <div class="row justify-content-lg-between align-items-md-center">
                    <div class="col-md-6 order-md-2 mb-9 mb-md-0">
                      <div class="mb-4">
                        <span class="u-label u-label--sm u-label--purple mb-3">Why do you need it?</span>
                        <h2 class="h3">All the information you need at your fingertips</h2>
                        <p>Choose what information is displayed on your Summary page. Create templates that work for you and your practice. You can even customize and update them on the fly! Edit and manage Case.one to truly fit your needs as your practice grows.</p>
                      </div>
                    </div>

                    <div class="col-md-5 order-md-1">
                      <img class="w-100" src="../assets/svg/components/information-icon.svg" alt="Image Description">
                    </div>
                  </div>
                </div>
                <!-- End Features Section -->
              
            

Icon blocks #9

              
                <!-- Features Section -->
                <div class="container space-2 space-3--lg">
                  <div class="card-deck d-block d-md-flex card-md-gutters-2">
                    <!-- Features -->
                    <a class="card card-frame mb-3" href="#">
                      <div class="card-body p-5">
                        <div class="media">
                          <img class="max-width-10 mr-3" src="../assets/svg/components/plan-brown-icon.svg" alt="Image Description">
                          <div class="media-body">
                            <h3 class="h6 text-dark">Feedback management</h3>
                            <span class="d-block">
                              Learn More
                              <span class="fa fa-angle-right ml-2"></span>
                            </span>
                          </div>
                        </div>
                      </div>
                    </a>
                    <!-- End Features -->

                    <!-- Features -->
                    <a class="card card-frame mb-3" href="#">
                      <div class="card-body p-5">
                        <div class="media">
                          <img class="max-width-10 mr-3" src="../assets/svg/components/user-research-purple-icon.svg" alt="Image Description">
                          <div class="media-body">
                            <h3 class="h6 text-dark">User research repository</h3>
                            <span class="d-block">
                              Learn More
                              <span class="fa fa-angle-right ml-2"></span>
                            </span>
                          </div>
                        </div>
                      </div>
                    </a>
                    <!-- End Features -->
                  </div>

                  <div class="card-deck d-block d-md-flex card-md-gutters-2">
                    <!-- Features -->
                    <a class="card card-frame" href="#">
                      <div class="card-body p-5">
                        <div class="media">
                          <img class="max-width-10 mr-3" src="../assets/svg/components/collaborative-user-research-blue-icon.svg" alt="Image Description">
                          <div class="media-body">
                            <h3 class="h6 text-dark">Collaborative user research</h3>
                            <span class="d-block">
                              Learn More
                              <span class="fa fa-angle-right ml-2"></span>
                            </span>
                          </div>
                        </div>
                      </div>
                    </a>
                    <!-- End Features -->

                    <!-- Features -->
                    <a class="card card-frame mb-3 mb-md-0" href="#">
                      <div class="card-body p-5">
                        <div class="media">
                          <img class="max-width-10 mr-3" src="../assets/svg/components/data-analysis-red-icon.svg" alt="Image Description">
                          <div class="media-body">
                            <h3 class="h6 text-dark">Qualitative data analysis</h3>
                            <span class="d-block">
                              Learn More
                              <span class="fa fa-angle-right ml-2"></span>
                            </span>
                          </div>
                        </div>
                      </div>
                    </a>
                    <!-- End Features -->
                  </div>
                </div>
                <!-- End Features Section -->
              
            

Icon blocks #10

Image Description

Professional design

Achieve virtually any look and layout from within the one template.

Image Description

Unlimited power

Find what you need in one template and combine features at will.

Image Description

Super-light

Manage document assembly with sophisticated yet super-light templates.

Image Description

Fully documented

Every component and plugin is well documented with live examples.

Image Description

Premium images

Premium stock images are included with your purchase in the download package.

Image Description

Social services

We strive to figure out ways to help your audience grow through all social platforms.

              
                <!-- Features Section -->
                <div class="container space-2 space-3--lg">
                  <div class="row">
                    <div class="col-md-6 mb-9">
                      <!-- Features -->
                      <div class="media pr-lg-4">
                        <img class="max-width-10 mr-3" src="../assets/svg/components/trophy-purple-icon.svg" alt="Image Description">
                        <div class="media-body">
                          <h3 class="h6">Professional design</h3>
                          <p class="mb-0">Achieve virtually any look and layout from within the one template.</p>
                        </div>
                      </div>
                      <!-- End Features -->
                    </div>

                    <div class="col-md-6 mb-9">
                      <!-- Features -->
                      <div class="media pl-lg-4">
                        <img class="max-width-10 mr-3" src="../assets/svg/components/rocket-cyan-icon.svg" alt="Image Description">
                        <div class="media-body">
                          <h3 class="h6">Unlimited power</h3>
                          <p class="mb-0">Find what you need in one template and combine features at will.</p>
                        </div>
                      </div>
                      <!-- End Features -->
                    </div>

                    <div class="w-100"></div>

                    <div class="col-md-6 mb-9">
                      <!-- Features -->
                      <div class="media pr-lg-4">
                        <img class="max-width-10 mr-3" src="../assets/svg/components/idea-primary-icon.svg" alt="Image Description">
                        <div class="media-body">
                          <h3 class="h6">Super-light</h3>
                          <p class="mb-0">Manage document assembly with sophisticated yet super-light templates.</p>
                        </div>
                      </div>
                      <!-- End Features -->
                    </div>

                    <div class="col-md-6 mb-9">
                      <!-- Features -->
                      <div class="media pl-lg-4">
                        <img class="max-width-10 mr-3" src="../assets/svg/components/documentation-red-icon.svg" alt="Image Description">
                        <div class="media-body">
                          <h3 class="h6">Fully documented</h3>
                          <p class="mb-0">Every component and plugin is well documented with live examples.</p>
                        </div>
                      </div>
                      <!-- End Features -->
                    </div>

                    <div class="w-100"></div>

                    <div class="col-md-6 mb-9 mb-md-0">
                      <!-- Features -->
                      <div class="media pr-lg-4">
                        <img class="max-width-10 mr-3" src="../assets/svg/components/sucure-payment-brown-icon.svg" alt="Image Description">
                        <div class="media-body">
                          <h3 class="h6">Premium images</h3>
                          <p class="mb-0">Premium stock images are included with your purchase in the download package.</p>
                        </div>
                      </div>
                      <!-- End Features -->
                    </div>

                    <div class="col-md-6">
                      <!-- Features -->
                      <div class="media pl-lg-4">
                        <img class="max-width-10 mr-3" src="../assets/svg/components/social-services-dark-icon.svg" alt="Image Description">
                        <div class="media-body">
                          <h3 class="h6">Social services</h3>
                          <p class="mb-0">We strive to figure out ways to help your audience grow through all social platforms.</p>
                        </div>
                      </div>
                      <!-- End Features -->
                    </div>
                  </div>
                </div>
                <!-- End Features Section -->
              
            

Icon blocks #11

Image Description

Professional design

Achieve virtually any look and layout from within the one template.

Learn More
Image Description

Space strategy

We strive to figure out ways to help your audience grow through all platforms.

Get Started
              
                <div class="container space-2 space-3--lg">
                  <div class="row">
                    <div class="col-lg-6 mb-7 mb-lg-0">
                      <!-- Features -->
                      <div class="media align-items-center">
                        <img class="max-width-18 mr-3" src="../assets/svg/components/trophy-primary-icon.svg" alt="Image Description">
                        <div class="media-body">
                          <h3 class="h5">Professional design</h3>
                          <p>Achieve virtually any look and layout from within the one template.</p>
                          <a href="#">Learn More</a>
                        </div>
                      </div>
                      <!-- End Features -->
                    </div>

                    <div class="col-lg-6 mb-7 mb-lg-0">
                      <!-- Features -->
                      <div class="media align-items-center">
                        <img class="max-width-18 mr-3" src="../assets/svg/components/services-primary-icon.svg" alt="Image Description">
                        <div class="media-body">
                          <h3 class="h5">Space strategy</h3>
                          <p>We strive to figure out ways to help your audience grow through all platforms.</p>
                          <a href="#">Get Started</a>
                        </div>
                      </div>
                      <!-- End Features -->
                    </div>
                  </div>
                </div>
              
            

Icon blocks #12

About Us

We always welcome keen to learn folks to our team

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.

              
                <!-- About Section -->
                <div class="container space-2 space-3--lg">
                  <div class="row justify-content-lg-between align-items-lg-center">
                    <div class="col-lg-5 mb-9 mb-lg-0">
                      <!-- Title -->
                      <span class="u-label u-label--sm u-label--purple mb-3">About Us</span>
                      <h2 class="h3">We always welcome keen to learn folks to our team</h2>
                      <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>
                      <!-- End Title -->
                    </div>

                    <div class="col-lg-6">
                      <div class="row">
                        <div class="col-6 col-sm-4 mb-7">
                          <!-- Icon Block -->
                          <div class="text-center">
                            <h3 class="h5">
                              <a class="d-block" href="#">
                                <img class="d-block max-width-12 mx-auto mb-1" src="../assets/svg/components/plan-brown-icon.svg" alt="SVG">
                                Marketing
                              </a>
                            </h3>
                          </div>
                          <!-- End Icon Block -->
                        </div>

                        <div class="col-6 col-sm-4 mb-7">
                          <!-- Icon Block -->
                          <div class="text-center">
                            <h3 class="h5">
                              <a class="d-block" href="#">
                                <img class="d-block max-width-12 mx-auto mb-1" src="../assets/svg/components/cog-primary-icon.svg" alt="SVG">
                                Operations
                              </a>
                            </h3>
                          </div>
                          <!-- End Icon Block -->
                        </div>

                        <div class="col-6 col-sm-4 mb-7">
                          <!-- Icon Block -->
                          <div class="text-center">
                            <h3 class="h5">
                              <a class="d-block" href="#">
                                <img class="d-block max-width-12 mx-auto mb-1" src="../assets/svg/components/arrow-red-icon.svg" alt="SVG">
                                HR
                              </a>
                            </h3>
                          </div>
                          <!-- End Icon Block -->
                        </div>

                        <div class="col-6 col-sm-4 mb-7 mb-sm-0">
                          <!-- Icon Block -->
                          <div class="text-center">
                            <h3 class="h5">
                              <a class="d-block" href="#">
                                <img class="d-block max-width-12 mx-auto mb-1" src="../assets/svg/components/legal-purple-icon.svg" alt="SVG">
                                Legal
                              </a>
                            </h3>
                          </div>
                          <!-- End Icon Block -->
                        </div>

                        <div class="col-6 col-sm-4">
                          <!-- Icon Block -->
                          <div class="text-center">
                            <h3 class="h5">
                              <a class="d-block" href="#">
                                <img class="d-block max-width-12 mx-auto mb-1" src="../assets/svg/components/finance-blue-icon.svg" alt="SVG">
                                Finance
                              </a>
                            </h3>
                          </div>
                          <!-- End Icon Block -->
                        </div>

                        <div class="col-6 col-sm-4">
                          <!-- Icon Block -->
                          <div class="text-center">
                            <h3 class="h5">
                              <a class="d-block" href="#">
                                <img class="d-block max-width-12 mx-auto mb-1" src="../assets/svg/components/portfolio-dark-icon.svg" alt="SVG">
                                Custom work
                              </a>
                            </h3>
                          </div>
                          <!-- End Icon Block -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End About Section -->
              
            

Icon blocks #13

Key benefits

The benefits of working at Space

Our team strives to help new members reach their unlimited potential every day.

At Space, we don't just accept difference—we celebrate it, we support it, and we thrive on it for the benefit of our employees, our products, and our community.

Image Description

Competitive salary

We believe that skill and hard work deserve generous compensation.

Image Description

Gear

We'll provide everything you need to do what you do.

Image Description

Skilled colleagues

You'll have the opportunity to work with talented, intelligent and driven colleagues.

Image Description

Team-building

Whether it's movie nights, Friday beers, or a company trip to Thailand, we love bonding with our team.

Image Description
              
                <!-- Icon Blocks -->
                <div class="container position-relative space-2 space-3--lg">
                  <div class="row ">
                    <div class="col-lg-5 mb-9 mb-lg-0">
                      <div class="pr-lg-4">
                        <!-- Title -->
                        <span class="u-label u-label--sm u-label--purple mb-3">Key benefits</span>
                        <h2 class="h3">The benefits of working at Space</h2>
                        <p>Our team strives to help new members reach their unlimited potential every day.</p>
                        <p>At Space, we don't just accept difference—we celebrate it, we support it, and we thrive on it for the benefit of our employees, our products, and our community.</p>
                        <!-- End Title -->
                      </div>
                    </div>

                    <div class="col-lg-7">
                      <div class="row">
                        <div class="col-md-6 mb-7">
                          <!-- Icon Blocks -->
                          <img class="max-width-10 mb-2" src="../assets/svg/components/money-purple-icon.svg" alt="Image Description">
                          <h3 class="h5">Competitive salary</h3>
                          <p class="mb-0">We believe that skill and hard work deserve generous compensation.</p>
                          <!-- End Icon Blocks -->
                        </div>

                        <div class="col-md-6 mb-7">
                          <!-- Icon Blocks -->
                          <img class="max-width-10 mb-2" src="../assets/svg/components/cog-primary-icon.svg" alt="Image Description">
                          <h3 class="h5">Gear</h3>
                          <p class="mb-0">We'll provide everything you need to do what you do.</p>
                          <!-- End Icon Blocks -->
                        </div>

                        <div class="col-md-6 mb-7 mb-md-0">
                          <!-- Icon Blocks -->
                          <img class="max-width-10 mb-2" src="../assets/svg/components/team-red-icon.svg" alt="Image Description">
                          <h3 class="h5">Skilled colleagues</h3>
                          <p class="mb-0">You'll have the opportunity to work with talented, intelligent and driven colleagues.</p>
                          <!-- End Icon Blocks -->
                        </div>

                        <div class="col-md-6">
                          <!-- Icon Blocks -->
                          <img class="max-width-10 mb-2" src="../assets/svg/components/plan-brown-icon.svg" alt="Image Description">
                          <h3 class="h5">Team-building</h3>
                          <p class="mb-0">Whether it's movie nights, Friday beers, or a company trip to Thailand, we love bonding with our team.</p>
                          <!-- End Icon Blocks -->
                        </div>
                      </div>
                    </div>
                  </div>

                  <img class="d-none d-lg-block w-lg-50 position-absolute-bottom-left-0 z-index-minus-1" src="../assets/img/bg/bg3.png" alt="Image Description">
                </div>
                <!-- End Icon Blocks -->
              
            

Icon blocks #14

Image Description

Call us

+1 (062) 109-9222
Image Description

Email us

support@htmlstream.com
Image Description

Address

153 Williamson Plaza, Maggieberg
              
                <!-- Contact Us -->
                <div class="container">
                  <div class="row space-2">
                    <div class="col-md-4 mb-7 mb-md-0">
                      <!-- Coins Name -->
                      <div class="media">
                        <img class="max-width-9 mr-2" src="../assets/svg/components/contacts-primary-icon.svg" alt="Image Description">
                        <div class="media-body">
                          <h4 class="text-secondary font-size-14 mb-0">Call us</h4>
                          <span class="d-block font-size-14">+1 (062) 109-9222</span>
                        </div>
                      </div>
                      <!-- End Coins Name -->
                    </div>

                    <div class="col-md-4 mb-7 mb-md-0">
                      <!-- Coins Name -->
                      <div class="media">
                        <img class="max-width-9 mr-2" src="../assets/svg/components/email-primary-icon.svg" alt="Image Description">
                        <div class="media-body">
                          <h4 class="text-secondary font-size-14 mb-0">Email us</h4>
                          <span class="d-block font-size-14">support@htmlstream.com</span>
                        </div>
                      </div>
                      <!-- End Coins Name -->
                    </div>

                    <div class="col-md-4 mb-7 mb-md-0">
                      <!-- Coins Name -->
                      <div class="media">
                        <img class="max-width-9 mr-2" src="../assets/svg/components/location-primary-icon.svg" alt="Image Description">
                        <div class="media-body">
                          <h4 class="text-secondary font-size-14 mb-0">Address</h4>
                          <span class="d-block font-size-14">153 Williamson Plaza, Maggieberg</span>
                        </div>
                      </div>
                      <!-- End Coins Name -->
                    </div>
                  </div>
                </div>
                <!-- End Contact Us -->
              
            

Icon blocks #15

  • Image Description

    Employee type:

    Full-time
  • Image Description

    Location:

    San Francisco
  • Image Description

    Job type:

    Product Management
  • Image Description

    Experience:

    Not specified
  • Image Description

    Salary:

    $50-$75k
  • Image Description

    Date posted:

    June 11, 2018
              
                <!-- Contacts List -->
                <ul class="list-unstyled">
                  <li class="media align-items-center pb-2">
                    <img class="max-width-6 mr-3" src="../assets/svg/components/user-type-dark-icon.svg" alt="Image Description">
                    <div class="media-body">
                      <h3 class="h6 mb-0">Employee type:</h3>
                      <small class="text-secondary">Full-time</small>
                    </div>
                  </li>

                  <li class="dropdown-divider"></li>

                  <li class="media align-items-center pb-2">
                    <img class="max-width-6 mr-3" src="../assets/svg/components/location-dark-icon.svg" alt="Image Description">
                    <div class="media-body">
                      <h3 class="h6 mb-0">Location:</h3>
                      <a class="small text-secondary" href="#">San Francisco</a>
                    </div>
                  </li>

                  <li class="dropdown-divider"></li>

                  <li class="media align-items-center pb-2">
                    <img class="max-width-6 mr-3" src="../assets/svg/components/services-dark-icon.svg" alt="Image Description">
                    <div class="media-body">
                      <h3 class="h6 mb-0">Job type:</h3>
                      <small class="text-secondary">Product Management</small>
                    </div>
                  </li>

                  <li class="dropdown-divider"></li>

                  <li class="media align-items-center pb-2">
                    <img class="max-width-6 mr-3" src="../assets/svg/components/portfolio-dark-icon.svg" alt="Image Description">
                    <div class="media-body">
                      <h3 class="h6 mb-0">Experience:</h3>
                      <small class="text-secondary">Not specified</small>
                    </div>
                  </li>

                  <li class="dropdown-divider"></li>

                  <li class="media align-items-center pb-2">
                    <img class="max-width-6 mr-3" src="../assets/svg/components/bag-with-money-dark-icon.svg" alt="Image Description">
                    <div class="media-body">
                      <h3 class="h6 mb-0">Salary:</h3>
                      <small class="text-secondary">$50-$75k</small>
                    </div>
                  </li>

                  <li class="dropdown-divider"></li>

                  <li class="media align-items-center pb-2">
                    <img class="max-width-6 mr-3" src="../assets/svg/components/calendar-dark-icon.svg" alt="Image Description">
                    <div class="media-body">
                      <h3 class="h6 mb-0">Date posted:</h3>
                      <small class="text-secondary">June 11, 2018</small>
                    </div>
                  </li>
                </ul>
                <!-- End Contacts List -->
              
            

Icon blocks #16

London, England

Office
  • Image Description
    153 Williamson Plaza, Maggieberg, MT 09514
  • Image Description
    Mon-Fri: 9 AM to 6 PM
  • Image Description
    (0161) 347 8854

Los Angeles, US

Office
  • Image Description
    728 Dooley Branch, Beckershire, LA 63598-2909
  • Image Description
    Mon-Fri: 9 AM to 6 PM
  • Image Description
    (364) 106-7572

Paris, France

Office
  • Image Description
    14, Avenue Pénélope Delaunay, 45952 Berthelot-sur-Lacombe
  • Image Description
    Mon-Fri: 9 AM to 6 PM
  • Image Description
    (011) 268 3610
              
                <!-- Contacts Section -->
                <div class="container space-2 space-3--lg">
                  <div class="row">
                    <div class="col-sm-6 col-md-4 mb-7 mb-md-0">
                      <h2 class="h4">London, England</h2>
                      <span class="d-block text-secondary">Office</span>

                      <hr class="my-5">

                      <address>
                        <!-- Contacts List -->
                        <ul class="list-unstyled text-secondary">
                          <li class="media align-items-center pb-2">
                            <img class="max-width-5 mr-2" src="../assets/svg/components/location-dark-icon.svg" alt="Image Description">
                            <div class="media-body">
                              153 Williamson Plaza, Maggieberg, MT 09514
                            </div>
                          </li>

                          <li class="media align-items-center py-2">
                            <img class="max-width-5 mr-2" src="../assets/svg/components/clock-dark-icon.svg" alt="Image Description">
                            <div class="media-body">
                              Mon-Fri: 9 AM to 6 PM
                            </div>
                          </li>

                          <li class="media align-items-center py-2">
                            <img class="max-width-5 mr-2" src="../assets/svg/components/contacts-dark-icon.svg" alt="Image Description">
                            <div class="media-body">
                              (0161) 347 8854
                            </div>
                          </li>
                        </ul>
                        <!-- End Contacts List -->
                      </address>
                    </div>

                    <div class="col-sm-6 col-md-4 mb-7 mb-sm-0">
                      <h3 class="h4">Los Angeles, US</h3>
                      <span class="d-block text-secondary">Office</span>

                      <hr class="my-5">

                      <address>
                        <!-- Contacts List -->
                        <ul class="list-unstyled text-secondary">
                          <li class="media align-items-center pb-2">
                            <img class="max-width-5 mr-2" src="../assets/svg/components/location-dark-icon.svg" alt="Image Description">
                            <div class="media-body">
                              728 Dooley Branch, Beckershire, LA 63598-2909
                            </div>
                          </li>

                          <li class="media align-items-center py-2">
                            <img class="max-width-5 mr-2" src="../assets/svg/components/clock-dark-icon.svg" alt="Image Description">
                            <div class="media-body">
                              Mon-Fri: 9 AM to 6 PM
                            </div>
                          </li>

                          <li class="media align-items-center py-2">
                            <img class="max-width-5 mr-2" src="../assets/svg/components/contacts-dark-icon.svg" alt="Image Description">
                            <div class="media-body">
                              (364) 106-7572
                            </div>
                          </li>
                        </ul>
                        <!-- End Contacts List -->
                      </address>
                    </div>

                    <div class="col-sm-6 col-md-4">
                      <h3 class="h4">Paris, France</h3>
                      <span class="d-block text-secondary">Office</span>

                      <hr class="my-5">

                      <address>
                        <!-- Contacts List -->
                        <ul class="list-unstyled text-secondary">
                          <li class="media align-items-center pb-2">
                            <img class="max-width-5 mr-2" src="../assets/svg/components/location-dark-icon.svg" alt="Image Description">
                            <div class="media-body">
                              14, Avenue Pénélope Delaunay, 45952 Berthelot-sur-Lacombe
                            </div>
                          </li>

                          <li class="media align-items-center py-2">
                            <img class="max-width-5 mr-2" src="../assets/svg/components/clock-dark-icon.svg" alt="Image Description">
                            <div class="media-body">
                              Mon-Fri: 9 AM to 6 PM
                            </div>
                          </li>

                          <li class="media align-items-center py-2">
                            <img class="max-width-5 mr-2" src="../assets/svg/components/contacts-dark-icon.svg" alt="Image Description">
                            <div class="media-body">
                              (011) 268 3610
                            </div>
                          </li>
                        </ul>
                        <!-- End Contacts List -->
                      </address>
                    </div>
                  </div>
                </div>
                <!-- End Contacts Section -->
              
            

Icon blocks #17

              
                <div class="card-deck d-block d-lg-flex card-lg-gutters-2">
                  <div class="card card-frame mb-4 mb-lg-0">
                    <!-- Icon Block -->
                    <a class="card-body p-4" href="#">
                      <span class="d-block text-muted text-right font-weight-medium mb-3">01</span>
                      <img class="max-width-9 mb-2" src="../assets/svg/components/creative-primary-icon.svg" alt="Image Description">
                      <h4 class="h6 text-dark mb-1">Creative</h4>
                      <p class="mb-0">This is where we sit down, grab a cup of coffee and dial in the details.</p>
                    </a>
                    <!-- End Icon Block -->
                  </div>

                  <div class="card card-frame mb-4 mb-lg-0">
                    <!-- Icon Block -->
                    <a class="card-body p-4" href="#">
                      <span class="d-block text-muted text-right font-weight-medium mb-3">02</span>
                      <img class="max-width-9 mb-2" src="../assets/svg/components/services-primary-icon.svg" alt="Image Description">
                      <h4 class="h6 text-dark mb-1">Features</h4>
                      <p>Now that we've aligned the details, it's time to get things mapped out and organized.</p>
                    </a>
                    <!-- End Icon Block -->
                  </div>

                  <div class="card card-frame mb-4 mb-lg-0">
                    <!-- Icon Block -->
                    <a class="card-body p-4" href="#">
                      <span class="d-block text-muted text-right font-weight-medium mb-3">03</span>
                      <img class="max-width-9 mb-2" src="../assets/svg/components/responsive-primary-icon.svg" alt="Image Description">
                      <h4 class="h6 text-dark mb-1">Responsive</h4>
                      <p>The time has come to bring those ideas and plans to life.</p>
                    </a>
                    <!-- End Icon Block -->
                  </div>

                  <div class="card card-frame">
                    <!-- Icon Block -->
                    <a class="card-body p-4" href="#">
                      <span class="d-block text-muted text-right font-weight-medium mb-3">04</span>
                      <img class="max-width-9 mb-2" src="../assets/svg/components/develop-primary-icon.svg" alt="Image Description">
                      <h4 class="h6 text-dark mb-1">Develop</h4>
                      <p>Whether through commerce or just an experience to tell your brand's story.</p>
                    </a>
                    <!-- End Icon Block -->
                  </div>
                </div>
              
            

Icon blocks #18

Image Description

Get exclusive offers

Get special offers and discounts on the latest sales from Space.

Image Description

Gift cards

Give someone close to you the gift of choice with a Space gift card.

Image Description

Free returns

You can return merchandise for a full refund, which will be credited on your original tender.

Image Description

Delivery on time

We will deliver your product, including free shippings at the expected time.

Image Description

Your information is safe

We will not sell your personal contact information for any marketing purposes or whatsoever.

Image Description

Secure checkout

All information is encrypted and transmitted without risk using a Secure Sockets Layer protocol.

              
                <div class="row">
                  <div class="col-sm-6 mb-5">
                    <!-- Icon Block -->
                    <img class="max-width-10 mb-1" src="../assets/svg/components/email-dark-icon.svg" alt="Image Description">
                    <h3 class="h6 mb-1">Get exclusive offers</h3>
                    <p class="font-size-14 text-muted">Get special offers and discounts on the latest sales from Space.</p>
                    <!-- End Icon Block -->
                  </div>

                  <div class="col-sm-6 mb-5">
                    <!-- Icon Block -->
                    <img class="max-width-10 mb-1" src="../assets/svg/components/box-and-lamp-dark-icon.svg" alt="Image Description">
                    <h3 class="h6 mb-1">Gift cards</h3>
                    <p class="font-size-14 text-muted">Give someone close to you the gift of choice with a Space gift card.</p>
                    <!-- End Icon Block -->
                  </div>
                </div>

                <div class="row">
                  <div class="col-sm-6 mb-5">
                    <!-- Icon Block -->
                    <img class="max-width-10 mb-1" src="../assets/svg/components/return-dark-icon.svg" alt="Image Description">
                    <h3 class="h6 mb-1">Free returns</h3>
                    <p class="font-size-14 text-muted">You can return merchandise for a full refund, which will be credited on your original tender.</p>
                    <!-- End Icon Block -->
                  </div>

                  <div class="col-sm-6 mb-5">
                    <!-- Icon Block -->
                    <img class="max-width-10 mb-1" src="../assets/svg/components/rocket-dark-icon.svg" alt="Image Description">
                    <h3 class="h6 mb-1">Delivery on time</h3>
                    <p class="font-size-14 text-muted">We will deliver your product, including free shippings at the expected time.</p>
                    <!-- End Icon Block -->
                  </div>
                </div>

                <div class="row">
                  <div class="col-sm-6 mb-5 mb-sm-0">
                    <!-- Icon Block -->
                    <img class="max-width-10 mb-1" src="../assets/svg/components/safe-information-dark-icon.svg" alt="Image Description">
                    <h3 class="h6 mb-1">Your information is safe</h3>
                    <p class="font-size-14 text-muted">We will not sell your personal contact information for any marketing purposes or whatsoever.</p>
                    <!-- End Icon Block -->
                  </div>

                  <div class="col-sm-6">
                    <!-- Icon Block -->
                    <img class="max-width-10 mb-1" src="../assets/svg/components/secure-checkout.svg" alt="Image Description">
                    <h3 class="h6 mb-1">Secure checkout</h3>
                    <p class="font-size-14 text-muted">All information is encrypted and transmitted without risk using a <span class="font-weight-medium">Secure Sockets Layer</span> protocol.</p>
                    <!-- End Icon Block -->
                  </div>
                </div>
              
            

Icon blocks #19

Image Description

Resolve complex tasks with Space

This is where we sit down, grab a cup of coffee and dial in the details.

Learn More
Image Description

Keeping the project in line to completion

Now that we've aligned the details, it's time to get things organized.

Learn More
Image Description

Easily develop realtime features

Whether through commerce or just an experience to tell your brand's story.

Learn More
              
                <!-- Card Deck -->
                <div class="container">
                  <div class="card-deck d-block d-lg-flex">
                    <!-- Card -->
                    <div class="card card-frame card-primary-frame mb-5 mb-lg-0">
                      <div class="card-body p-5">
                        <div class="media align-items-center mb-3">
                          <img class="max-width-9 mr-3" src="../assets/svg/components/plan-primary-icon.svg" alt="Image Description">
                          <div class="media-body">
                            <h2 class="h5 mb-0">Resolve complex tasks with Space</h2>
                          </div>
                        </div>
                        <p>This is where we sit down, grab a cup of coffee and dial in the details.</p>
                        <a href="#">
                          Learn More
                          <span class="fa fa-angle-right align-middle ml-2"></span>
                        </a>
                      </div>
                    </div>
                    <!-- End Card -->

                    <!-- Card -->
                    <div class="card bg-purple rounded mb-5 mb-lg-0">
                      <div class="card-body p-5">
                        <div class="media align-items-center mb-3">
                          <img class="max-width-9 mr-3" src="../assets/svg/components/moving-up-white-icon.svg" alt="Image Description">
                          <div class="media-body">
                            <h3 class="h5 text-white mb-0">Keeping the project in line to completion</h3>
                          </div>
                        </div>
                        <p class="text-light">Now that we've aligned the details, it's time to get things organized.</p>
                        <a class="text-light" href="#">
                          Learn More
                          <span class="fa fa-angle-right align-middle ml-2"></span>
                        </a>
                      </div>
                    </div>
                    <!-- End Card -->

                    <!-- Card -->
                    <div class="card card-frame card-primary-frame mb-5 mb-lg-0">
                      <div class="card-body p-5">
                        <div class="media align-items-center mb-3">
                          <img class="max-width-9 mr-3" src="../assets/svg/components/develop-primary-icon.svg" alt="Image Description">
                          <div class="media-body">
                            <h3 class="h5 mb-0">Easily develop realtime features</h3>
                          </div>
                        </div>
                        <p>Whether through commerce or just an experience to tell your brand's story.</p>
                        <a href="#">
                          Learn More
                          <span class="fa fa-angle-right align-middle ml-2"></span>
                        </a>
                      </div>
                    </div>
                    <!-- End Card -->
                  </div>
                </div>
                <!-- End Card Deck -->
              
            

Icon blocks #20

Image Description

The powerful project manager to get things organized

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 key. 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.

Read more
Image Description

Visualize your napkin sketches into beautiful pixels

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. 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.

Read more
Image Description

Creative gifts that drive Space foundation

We aim high at being focused on building relationships with our clients and community. Using our creative gifts drives this foundation. 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.

Read more
              
                <!-- Features -->
                <div class="row justify-content-lg-center align-items-sm-center mb-3 mb-sm-9">
                  <div class="col-sm-4 col-md-3 col-lg-2 mb-2 mb-sm-0">
                    <img class="img-fluid w-50 w-sm-100" src="../assets/svg/components/puzzle-primary-icon.svg" alt="Image Description">
                  </div>
                  <div class="col-sm-8 col-md-9 col-lg-7 mb-5 mb-md-0">
                    <div class="pl-md-4">
                      <h3 class="h4">The powerful project manager to get things organized</h3>
                      <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 key. 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="#">
                        Read more
                        <span class="fa fa-angle-right align-middle ml-1"></span>
                      </a>
                    </div>
                  </div>
                </div>
                <!-- End Features -->

                <!-- Features -->
                <div class="row justify-content-lg-center align-items-sm-center mb-3 mb-sm-9">
                  <div class="col-sm-4 col-md-3 col-lg-2 mb-2 mb-sm-0">
                    <img class="img-fluid w-50 w-sm-100" src="../assets/svg/components/responsive-purple-icon.svg" alt="Image Description">
                  </div>
                  <div class="col-sm-8 col-md-9 col-lg-7 mb-5 mb-md-0">
                    <div class="pl-md-4">
                      <h3 class="h4">Visualize your napkin sketches into beautiful pixels</h3>
                      <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. 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="#">
                        Read more
                        <span class="fa fa-angle-right align-middle ml-1"></span>
                      </a>
                    </div>
                  </div>
                </div>
                <!-- End Features -->

                <!-- Features -->
                <div class="row justify-content-lg-center align-items-sm-center">
                  <div class="col-sm-4 col-md-3 col-lg-2 mb-2 mb-sm-0">
                    <img class="img-fluid w-50 w-sm-100" src="../assets/svg/components/idea-red-icon.svg" alt="Image Description">
                  </div>
                  <div class="col-sm-8 col-md-9 col-lg-7 mb-5 mb-md-0">
                    <div class="pl-md-4">
                      <h3 class="h4">Creative gifts that drive Space foundation</h3>
                      <p>We aim high at being focused on building relationships with our clients and community. Using our creative gifts drives this foundation. 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="#">
                        Read more
                        <span class="fa fa-angle-right align-middle ml-1"></span>
                      </a>
                    </div>
                  </div>
                </div>
                <!-- End Features -->
              
            

Icon blocks #21

Image Description

Understanding the task at hand and ironing out the wrinkles is key.

Image Description

Understanding the task at hand and ironing out the wrinkles is key.

Image Description

Now that we've aligned the details, it's time to get things mapped out and organized.

Image Description

The time has come to bring those ideas and plans to life.

Image Description

Understanding the task at hand and ironing out the wrinkles is key.

Image Description

Now that we've aligned the details, it's time to get things organized.

              
                <div class="row">
                  <div class="col-sm-6 col-lg-4 mb-7">
                    <!-- Icon Block -->
                    <div class="media align-items-center pr-lg-4">
                      <img class="max-width-9 mr-3" src="../assets/svg/components/consult-cyan-icon.svg" alt="Image Description">
                      <div class="media-body">
                        <p class="font-size-14 mb-0">Understanding the task at hand and ironing out the wrinkles is key.</p>
                      </div>
                    </div>
                    <!-- End Icon Block -->
                  </div>

                  <div class="col-sm-6 col-lg-4 mb-7">
                    <!-- Icon Block -->
                    <div class="media align-items-center pr-lg-4">
                      <img class="max-width-9 mr-3" src="../assets/svg/components/plan-primary-icon.svg" alt="Image Description">
                      <div class="media-body">
                        <p class="font-size-14 mb-0">Understanding the task at hand and ironing out the wrinkles is key.</p>
                      </div>
                    </div>
                    <!-- End Icon Block -->
                  </div>

                  <div class="col-sm-6 col-lg-4 mb-7">
                    <!-- Icon Block -->
                    <div class="media align-items-center pr-lg-4">
                      <img class="max-width-9 mr-3" src="../assets/svg/components/create-blue-icon.svg" alt="Image Description">
                      <div class="media-body">
                        <p class="font-size-14 mb-0">Now that we've aligned the details, it's time to get things mapped out and organized.</p>
                      </div>
                    </div>
                    <!-- End Icon Block -->
                  </div>

                  <div class="col-sm-6 col-lg-4 mb-7 mb-lg-0">
                    <!-- Icon Block -->
                    <div class="media align-items-center pr-lg-4">
                      <img class="max-width-9 mr-3" src="../assets/svg/components/develop-purple-icon.svg" alt="Image Description">
                      <div class="media-body">
                        <p class="font-size-14 mb-0">The time has come to bring those ideas and plans to life.</p>
                      </div>
                    </div>
                    <!-- End Icon Block -->
                  </div>

                  <div class="col-sm-6 col-lg-4 mb-7 mb-md-0">
                    <!-- Icon Block -->
                    <div class="media align-items-center pr-lg-4">
                      <img class="max-width-9 mr-3" src="../assets/svg/components/rocket-red-icon.svg" alt="Image Description">
                      <div class="media-body">
                        <p class="font-size-14 mb-0">Understanding the task at hand and ironing out the wrinkles is key.</p>
                      </div>
                    </div>
                    <!-- End Icon Block -->
                  </div>

                  <div class="col-sm-6 col-lg-4">
                    <!-- Icon Block -->
                    <div class="media align-items-center pr-lg-4">
                      <img class="max-width-9 mr-3" src="../assets/svg/components/data-analysis-dark-icon.svg" alt="Image Description">
                      <div class="media-body">
                        <p class="font-size-14 mb-0">Now that we've aligned the details, it's time to get things organized.</p>
                      </div>
                    </div>
                    <!-- End Icon Block -->
                  </div>
                </div>
              
            

Icon blocks #22

Image Description

Intuitive search

Achieve virtually any look and layout from within the one template.

Image Description

Genius insights

Find what you need in one template and combine features at will.

Image Description

Predictive analytics

Manage document assembly with sophisticated yet super-light templates.

Image Description

Fully documented

Every component and plugin is well documented with live examples.

Image Description
              
                <!-- Features Section -->
                <div class="container">
                  <div class="row">
                    <div class="col-lg-8">
                      <div class="row">
                        <div class="col-sm-6 mb-7">
                          <!-- Icon Blocks -->
                          <div class="media pr-lg-2">
                            <img class="max-width-7 mr-3" src="../assets/svg/components/search-browser-primary-icon.svg" alt="Image Description">
                            <div class="media-body">
                              <h3 class="h6">Intuitive search</h3>
                              <p class="mb-0">Achieve virtually any look and layout from within the one template.</p>
                            </div>
                          </div>
                          <!-- End Icon Blocks -->
                        </div>

                        <div class="col-sm-6 mb-7 mb-sm-0">
                          <!-- Icon Blocks -->
                          <div class="media pr-lg-2">
                            <img class="max-width-7 mr-3" src="../assets/svg/components/genious-purple-icon.svg" alt="Image Description">
                            <div class="media-body">
                              <h3 class="h6">Genius insights</h3>
                              <p class="mb-0">Find what you need in one template and combine features at will.</p>
                            </div>
                          </div>
                          <!-- End Icon Blocks -->
                        </div>

                        <div class="col-sm-6 mb-7 mb-sm-0">
                          <!-- Icon Blocks -->
                          <div class="media pr-lg-2">
                            <img class="max-width-7 mr-3" src="../assets/svg/components/analytics-blue-icon.svg" alt="Image Description">
                            <div class="media-body">
                              <h3 class="h6">Predictive analytics</h3>
                              <p class="mb-0">Manage document assembly with sophisticated yet super-light templates.</p>
                            </div>
                          </div>
                          <!-- End Icon Blocks -->
                        </div>

                        <div class="col-sm-6">
                          <!-- Icon Blocks -->
                          <div class="media pr-lg-2">
                            <img class="max-width-7 mr-3" src="../assets/svg/components/documentation-red-icon.svg" alt="Image Description">
                            <div class="media-body">
                              <h3 class="h6">Fully documented</h3>
                              <p class="mb-0">Every component and plugin is well documented with live examples.</p>
                            </div>
                          </div>
                          <!-- End Icon Blocks -->
                        </div>
                      </div>
                    </div>

                    <div class="col-lg-4 d-none d-lg-block">
                      <img class="img-fluid" src="../assets/svg/components/startup-life-illustration.svg" alt="Image Description">
                    </div>
                  </div>
                </div>
                <!-- End Features Section -->
              
            

Icon blocks #23

Features that discover you

Experience a level of our quality in both design & customization works.

Image Description

Intuitive search

Now that your brand is all dressed up and ready to party, it's time to release it to the world.

Image Description

Genius insights

This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.

Image Description

Predictive analytics

Whether through commerce or just an experience to tell your brand's story.

              
                <!-- Features Section -->
                <div class="container">
                  <div class="card w-lg-90 shadow mx-lg-auto">
                    <div class="card-body p-7">
                      <!-- Title -->
                      <div class="w-md-80 w-lg-60 text-center mx-md-auto mb-9">
                        <h2 class="h3">Features that discover you</h2>
                        <p>Experience a level of our quality in both design & customization works.</p>
                      </div>
                      <!-- End Title -->

                      <div class="row justify-content-lg-between text-center text-lg-left">
                        <div class="col-sm-6 col-lg-4 offset-sm-3 offset-lg-0 mb-4 mb-lg-0">
                          <!-- Icon Block -->
                          <div class="pr-lg-4">
                            <img class="max-width-10 mb-2" src="../assets/svg/components/search-browser-primary-icon.svg" alt="Image Description">
                            <h3 class="h5 mb-1">Intuitive search</h3>
                            <p>Now that your brand is all dressed up and ready to party, it's time to release it to the world.</p>
                          </div>
                          <!-- End Icon Block -->
                        </div>

                        <div class="col-sm-6 col-lg-4 mb-4 mb-lg-0">
                          <!-- Icon Block -->
                          <div class="pr-lg-4">
                            <img class="max-width-10 mb-2" src="../assets/svg/components/genious-purple-icon.svg" alt="Image Description">
                            <h4 class="h5 mb-1">Genius insights</h4>
                            <p>This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
                          </div>
                          <!-- End Icon Block -->
                        </div>

                        <div class="col-sm-6 col-lg-4">
                          <!-- Icon Block -->
                          <div class="pr-lg-4">
                            <img class="max-width-10 mb-2" src="../assets/svg/components/analytics-blue-icon.svg" alt="Image Description">
                            <h4 class="h5 mb-1">Predictive analytics</h4>
                            <p>Whether through commerce or just an experience to tell your brand's story.</p>
                          </div>
                          <!-- End Icon Block -->
                        </div>
                      </div>
                    </div>

                    <!-- Card Footer -->
                    <div class="card-footer bg-gray-100 text-center py-4 px-7">
                      <a class="text-secondary" href="#">
                        Learn more about Space features
                        <span class="fa fa-arrow-right font-size-13 ml-2"></span>
                      </a>
                    </div>
                    <!-- End Card Footer -->
                  </div>
                </div>
                <!-- End Features Section -->
              
            

Icon blocks #24

Image Description

Learn from the best

Manage document assembly with sophisticated yet super-light templates.

Image Description

Conquer

Achieve virtually any look and layout from within the one template.

Image Description

Get rewarded

Find what you need in one template and combine features at will.

              
                <!-- Icon Blocks Section -->
                <div class="bg-purple">
                  <div class="container space-2 space-3--lg">
                    <div class="row">
                      <div class="col-md-4 mb-7 mb-md-0">
                        <!-- Icon Blocks -->
                        <div class="text-center px-lg-3">
                          <img class="max-width-14 mb-2" src="../assets/svg/components/teaching-white-icon.svg" alt="Image Description">
                          <h3 class="h4 text-white">Learn from the best</h3>
                          <p class="text-light mb-0">Manage document assembly with sophisticated yet super-light templates.</p>
                        </div>
                        <!-- End Icon Blocks -->
                      </div>

                      <div class="col-md-4 mb-7 mb-md-0">
                        <!-- Icon Blocks -->
                        <div class="text-center px-lg-3">
                          <img class="max-width-14 mb-2" src="../assets/svg/components/mountains-white-icon.svg" alt="Image Description">
                          <h3 class="h4 text-white">Conquer</h3>
                          <p class="text-light mb-0">Achieve virtually any look and layout from within the one template.</p>
                        </div>
                        <!-- End Icon Blocks -->
                      </div>

                      <div class="col-md-4">
                        <!-- Icon Blocks -->
                        <div class="text-center px-lg-3">
                          <img class="max-width-14 mb-2" src="../assets/svg/components/get-rewarded-white-icon.svg" alt="Image Description">
                          <h3 class="h4 text-white">Get rewarded</h3>
                          <p class="text-light mb-0">Find what you need in one template and combine features at will.</p>
                        </div>
                        <!-- End Icon Blocks -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Icon Blocks Section -->
              
            

Icon blocks #25

Image Description

Professional design

Achieve virtually any look and layout from within the one template.

Image Description

Unlimited power

Find what you need in one template and combine features at will.

Image Description

Super-light

Manage document assembly with sophisticated yet super-light templates.

Image Description

Fully documented

Every component and plugin is well documented with live examples.

Image Description

Premium images

Premium stock images are included with your purchase in the download package.

Image Description

Social services

We strive to figure out ways to help your audience grow through all social platforms.

              
                <!-- Features Section -->
                <div class="container">
                  <div class="row">
                    <div class="col-md-6 mb-9">
                      <!-- Features -->
                      <div class="media pr-lg-4">
                        <span class="u-icon u-icon--md u-icon--shadow rounded-circle p-2 mr-3">
                          <img class="u-icon__inner" src="../assets/svg/components/trophy-purple-icon.svg" alt="Image Description">
                        </span>
                        <div class="media-body">
                          <h3 class="h6">Professional design</h3>
                          <p class="mb-0">Achieve virtually any look and layout from within the one template.</p>
                        </div>
                      </div>
                      <!-- End Features -->
                    </div>

                    <div class="col-md-6 mb-9">
                      <!-- Features -->
                      <div class="media pl-lg-4">
                        <span class="u-icon u-icon--md u-icon--shadow rounded-circle p-2 mr-3">
                          <img class="u-icon__inner" src="../assets/svg/components/rocket-cyan-icon.svg" alt="Image Description">
                        </span>
                        <div class="media-body">
                          <h3 class="h6">Unlimited power</h3>
                          <p class="mb-0">Find what you need in one template and combine features at will.</p>
                        </div>
                      </div>
                      <!-- End Features -->
                    </div>

                    <div class="w-100"></div>

                    <div class="col-md-6 mb-9">
                      <!-- Features -->
                      <div class="media pr-lg-4">
                        <span class="u-icon u-icon--md u-icon--shadow rounded-circle p-2 mr-3">
                          <img class="u-icon__inner" src="../assets/svg/components/idea-primary-icon.svg" alt="Image Description">
                        </span>
                        <div class="media-body">
                          <h3 class="h6">Super-light</h3>
                          <p class="mb-0">Manage document assembly with sophisticated yet super-light templates.</p>
                        </div>
                      </div>
                      <!-- End Features -->
                    </div>

                    <div class="col-md-6 mb-9">
                      <!-- Features -->
                      <div class="media pl-lg-4">
                        <span class="u-icon u-icon--md u-icon--shadow rounded-circle p-2 mr-3">
                          <img class="u-icon__inner" src="../assets/svg/components/documentation-red-icon.svg" alt="Image Description">
                        </span>
                        <div class="media-body">
                          <h3 class="h6">Fully documented</h3>
                          <p class="mb-0">Every component and plugin is well documented with live examples.</p>
                        </div>
                      </div>
                      <!-- End Features -->
                    </div>

                    <div class="w-100"></div>

                    <div class="col-md-6 mb-9 mb-md-0">
                      <!-- Features -->
                      <div class="media pr-lg-4">
                        <span class="u-icon u-icon--md u-icon--shadow rounded-circle p-2 mr-3">
                          <img class="u-icon__inner" src="../assets/svg/components/sucure-payment-brown-icon.svg" alt="Image Description">
                        </span>
                        <div class="media-body">
                          <h3 class="h6">Premium images</h3>
                          <p class="mb-0">Premium stock images are included with your purchase in the download package.</p>
                        </div>
                      </div>
                      <!-- End Features -->
                    </div>

                    <div class="col-md-6">
                      <!-- Features -->
                      <div class="media pl-lg-4">
                        <span class="u-icon u-icon--md u-icon--shadow rounded-circle p-2 mr-3">
                          <img class="u-icon__inner" src="../assets/svg/components/social-services-dark-icon.svg" alt="Image Description">
                        </span>
                        <div class="media-body">
                          <h3 class="h6">Social services</h3>
                          <p class="mb-0">We strive to figure out ways to help your audience grow through all social platforms.</p>
                        </div>
                      </div>
                      <!-- End Features -->
                    </div>
                  </div>
                </div>
                <!-- End Features Section -->
              
            

Icon blocks #26

Image Description

Professional Design

Achieve virtually any look and layout from within the one template.

Learn more
Image Description

Unlimited Power

Find what you need in one template and combine features at will.

Learn more
              
                <!-- Icon Blocks Section -->
                <div class="container">
                  <div class="card-deck card-sm-gutters-2 d-block d-sm-flex w-lg-60 mx-lg-auto">
                    <div class="card card-frame card-purple-frame mb-3 mb-sm-0">
                      <!-- Icon Blocks -->
                      <div class="card-body p-6">
                        <span class="u-icon u-icon--md u-icon--shadow rounded-circle p-2 mb-3">
                          <img class="u-icon__inner" src="../assets/svg/components/trophy-purple-icon.svg" alt="Image Description">
                        </span>
                        <h3 class="h5 text-purple">Professional Design</h3>
                        <p>Achieve virtually any look and layout from within the one template.</p>
                        <a class="text-purple" href="#">Learn more <span class="fa fa-angle-right font-size-14 ml-2"></span></a>
                      </div>
                      <!-- End Icon Blocks -->
                    </div>

                    <div class="card card-frame card-danger-frame">
                      <!-- Icon Blocks -->
                      <div class="card-body p-6">
                        <span class="u-icon u-icon--md u-icon--shadow rounded-circle p-2 mb-3">
                          <img class="u-icon__inner" src="../assets/svg/components/rocket-red-icon.svg" alt="Image Description">
                        </span>
                        <h3 class="h5 text-danger">Unlimited Power</h3>
                        <p>Find what you need in one template and combine features at will.</p>
                        <a class="text-danger" href="#">Learn more <span class="fa fa-angle-right font-size-14 ml-2"></span></a>
                      </div>
                      <!-- End Icon Blocks -->
                    </div>
                  </div>
                </div>
                <!-- End Icon Blocks Section -->