Feature Icons

Component 1

Ask a question

Email support to answer all your questions

Locations

Choose our closest branch to your home

Promotions

Explore all our offers and promotions

                    
                      <!-- Muse Section -->
                      <section class="muse-section">
                        <div class="row">
                          <div class="col-md-6 col-lg-4 my-3">
                            <div class="rounded-12 shadow-dark-80 bg-white p-4 h-md-100 m-0">
                              <div class="d-flex p-xl-2">
                                <span class="text-primary">
                                  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16">
                                    <g data-name="icons/tabler/mail" transform="translate(0)">
                                      <rect data-name="Icons/Tabler/Mail background" width="16" height="16" fill="none"></rect>
                                      <path d="M2.256,12.718A2.259,2.259,0,0,1,0,10.462V2.274c0-.013,0-.026,0-.038A2.259,2.259,0,0,1,2.256,0H13.744A2.259,2.259,0,0,1,16,2.256v8.205a2.259,2.259,0,0,1-2.256,2.256ZM1.231,10.462a1.027,1.027,0,0,0,1.025,1.026H13.744a1.027,1.027,0,0,0,1.025-1.026V3.406L8.341,7.691a.613.613,0,0,1-.6.045l-.08-.045L1.231,3.407ZM8,6.439l6.724-4.482a1.027,1.027,0,0,0-.98-.726H2.256a1.027,1.027,0,0,0-.98.726Z" transform="translate(0 2)" fill="#1e1e1e"></path>
                                    </g>
                                  </svg>                
                                </span>
                                <div class="pl-3 ml-xl-2">
                                  <h5 class="mb-1">Ask a question</h5>
                                  <p class="mb-0 lh-lg">Email support to answer all your questions</p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="col-md-6 col-lg-4 my-3">
                            <div class="rounded-12 shadow-dark-80 bg-white p-4 h-md-100 m-0">
                              <div class="d-flex p-xl-2">
                                <span class="text-primary">
                                  <svg data-name="icons/tabler/map" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16">
                                    <rect data-name="Icons/Tabler/Map background" width="16" height="16" fill="none"></rect>
                                    <path d="M5.45,15.356l-3.4-3.4a7.005,7.005,0,1,1,9.907,0l-3.4,3.4a2.2,2.2,0,0,1-3.112,0ZM2.9,2.9a5.812,5.812,0,0,0,0,8.209l3.4,3.4a1,1,0,0,0,1.415,0l3.4-3.4a5.8,5.8,0,0,0,0-8.209l-.153-.148A5.8,5.8,0,0,0,2.9,2.9ZM4,7.006a3,3,0,1,1,3,3A3.005,3.005,0,0,1,4,7.006Zm1.2,0a1.8,1.8,0,1,0,1.8-1.8A1.8,1.8,0,0,0,5.2,7.006Z" transform="translate(1)" fill="#1e1e1e"></path>
                                  </svg>                
                                </span>
                                <div class="pl-3 ml-xl-2">
                                  <h5 class="mb-1">Locations</h5>
                                  <p class="mb-0 lh-lg">Choose our closest branch to your home</p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="col-md-6 col-lg-4 my-3">
                            <div class="rounded-12 shadow-dark-80 bg-white p-4 h-md-100 m-0">
                              <div class="d-flex p-xl-2">
                                <span class="text-primary">
                                  <svg data-name="icons/tabler/tag" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16">
                                    <rect data-name="Icons/Tabler/Tag background" width="16" height="16" fill="none"></rect>
                                    <path d="M7.935,15.593l-.122-.1L.186,7.865a.628.628,0,0,1-.178-.349L0,7.416V4.026A4.017,4.017,0,0,1,3.841,0l.184,0h3.39L7.46,0l.042,0,.083.017L7.664.05l.053.025L7.8.132l.061.054L15.518,7.84a1.92,1.92,0,0,1,.076,2.447l-.1.121-5.111,5.11A1.894,1.894,0,0,1,9.121,16,1.931,1.931,0,0,1,7.935,15.593ZM1.275,3.869l0,.157V7.151L8.687,14.57a.649.649,0,0,0,.434.165.6.6,0,0,0,.32-.089l.069-.051,5.061-5.06a.639.639,0,0,0,.076-.752l-.051-.069L7.151,1.272H4.026A2.755,2.755,0,0,0,1.275,3.869ZM3.39,5.721a2.331,2.331,0,1,1,2.331,2.33A2.334,2.334,0,0,1,3.39,5.721Zm1.272,0A1.059,1.059,0,1,0,5.721,4.662,1.06,1.06,0,0,0,4.662,5.721Z" fill="#1e1e1e"></path>
                                  </svg>                
                                </span>
                                <div class="pl-3 ml-xl-2">
                                  <h5 class="mb-1">Promotions</h5>
                                  <p class="mb-0 lh-lg">Explore all our offers and promotions</p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </section>
                    
                  

Component 2

img
Learning Rewards

There are many variations of passages of Lorem Ipsum available

img
Fast learning

Lorem Duis quis ex ultrices, consectetur neque sed, blandit elit. In vitae est et

img
Analytics

It is a long established fact that a reader will be distracted by the readable content

                    
                      <div class="bg-gray-100 education-template">
                        <div class="container">
                          <!-- Muse Section -->
                          <section class="muse-section">
                            <div class="row">
                              <div class="col-md-4 mb-3 mb-md-0">
                                <div class="text-center">
                                  <span class="avatar avatar-white mb-3 avatar-xxl rounded-24 m-auto shadow-dark-80"><img src="../assets/img/templates/reward.svg" alt="img"></span>
                                  <h5 class="mt-3 mt-md-4">Learning Rewards</h5>
                                  <p class="lh-lg">There are many variations of passages of Lorem Ipsum available</p>
                                </div>
                              </div>
                              <div class="col-md-4 mb-3 mb-md-0">
                                <div class="text-center">
                                  <span class="avatar avatar-white mb-3 avatar-xxl rounded-24 m-auto shadow-dark-80"><img src="../assets/img/templates/fast-learning.svg" alt="img"></span>
                                  <h5 class="mt-3 mt-md-4">Fast learning</h5>
                                  <p class="lh-lg">Lorem Duis quis ex ultrices, consectetur neque sed, blandit elit. In vitae est et</p>
                                </div>
                              </div>
                              <div class="col-md-4">
                                <div class="text-center">
                                  <span class="avatar avatar-white mb-3 avatar-xxl rounded-24 m-auto shadow-dark-80"><img src="../assets/img/templates/analytics.svg" alt="img"></span>
                                  <h5 class="mt-3 mt-md-4">Analytics</h5>
                                  <p class="lh-lg">It is a long established fact that a reader will be distracted by the readable content</p>
                                </div>
                              </div>
                            </div>
                          </section>
                        </div>
                      </div>
                    
                  

Component 3

Why Fabrx

Choose the right plan for you

Mail
Email support

24/7 support to answer all your
questions

Mail
Remote access

Manage your team and files from
anywhere

Mail
Free Credits

Redeem goodies from our
marketplace

                    
                      <div class="saas3-template bg-gray-100">
                        <div class="container">
                          <!-- Muse Section -->
                          <section class="muse-section">
                            <h5>Why Fabrx</h5>
                            <h2 class="h1 mb-md-4 mb-3 pb-lg-4">Choose the right plan for you</h2>
                            <div class="row">
                              <div class="col-md-4">
                                <div class="card muse-card px-4 px-lg-5 py-3 py-md-4 text-center rounded-12 my-3">
                                  <span class="circle circle-lg bg-gray-100 m-auto mt-3"><img src="../assets/svg/icons/mail.svg" alt="Mail" style="width:20px"></span>
                                  <h5 class="mt-3">Email support</h5>
                                  <p>24/7 support to answer all your <br class="d-none d-xl-block">questions</p>
                                </div>
                              </div>
                              <div class="col-md-4">
                                <div class="card muse-card px-4 px-lg-5 py-3 py-md-4 text-center rounded-12 my-3">
                                  <span class="circle circle-lg bg-gray-100 m-auto mt-3"><img src="../assets/svg/icons/map.svg" alt="Mail" style="width:20px"></span>
                                  <h5 class="mt-3">Remote access</h5>
                                  <p>Manage your team and files from <br class="d-none d-xl-block">anywhere</p>
                                </div>
                              </div>
                              <div class="col-md-4">
                                <div class="card muse-card px-4 px-lg-5 py-3 py-md-4 text-center rounded-12 my-3">
                                  <span class="circle circle-lg bg-gray-100 m-auto mt-3"><img src="../assets/svg/icons/gift.svg" alt="Mail" style="width:20px"></span>
                                  <h5 class="mt-3">Free Credits</h5>
                                  <p>Redeem goodies from our <br class="d-none d-lg-block">marketplace</p>
                                </div>
                              </div>
                            </div>
                          </section>
                        </div>
                      </div>
                    
                  

Component 4

freebies
Monthly Freebies

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature.

Explore offers
intergration
Integrations

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.

See all plugins
file
File Explorer

It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum.

Learn more
                    
                      <div class="pricing-template bg-gray-100">
                        <div class="container">
                          <!-- Muse Section -->
                          <section class="muse-section py-4 py-md-5 mt-md-2">
                            <div class="row">
                              <div class="col-lg-4 col-md-6">
                                <div class="mb-4 mb-md-5 mb-lg-4">
                                  <span class="d-inline-block rounded-pill shadow-dark-80 bg-white square-box-100 d-flex flex-column align-items-center justify-content-end"><img src="../assets/img/pages/freebies.svg" alt="freebies"></span>
                                  <h5 class="mt-4">Monthly Freebies</h5>
                                  <p class="lh-lg">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature.</p>
                                  <a href="#" class="btn btn-link link-primary caption">Explore offers <svg class="ml-1" data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16">
                                    <rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
                                    <path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#0D6EFD"></path>
                                  </svg></a>
                                </div>
                              </div>
                              <div class="col-lg-4 col-md-6">
                                <div class="mb-4 mb-md-5 mb-lg-4">
                                  <span class="d-inline-block rounded-pill shadow-dark-80 bg-white square-box-100 d-flex flex-column align-items-center justify-content-end"><img src="../assets/img/pages/intergration.svg" alt="intergration"></span>
                                  <h5 class="mt-4">Integrations</h5>
                                  <p class="lh-lg">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</p>
                                  <a href="#" class="btn btn-link link-primary caption">See all plugins <svg class="ml-1" data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16">
                                    <rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
                                    <path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#0D6EFD"></path>
                                  </svg></a>
                                </div>
                              </div>
                              <div class="col-lg-4 col-md-6">
                                <div class="mb-4 mb-md-5 mb-lg-4">
                                  <span class="d-inline-block rounded-pill shadow-dark-80 bg-white square-box-100 d-flex flex-column align-items-center justify-content-end"><img src="../assets/img/pages/file.svg" alt="file"></span>
                                  <h5 class="mt-4">File Explorer</h5>
                                  <p class="lh-lg">It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum.</p>
                                  <a href="#" class="btn btn-link link-primary caption">Learn more <svg class="ml-1" data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16">
                                    <rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
                                    <path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#0D6EFD"></path>
                                  </svg></a>
                                </div>
                              </div>
                            </div>
                          </section>
                        </div>
                      </div>