Informative Blocks

Different style of info blocks/components.

Info #1

              
                <!-- Card --> <a class="card card-frame card-text-dark mb-2" href="../pages/careers-single.html">
                  <div class="card-body p-4">
                    <span class="row justify-content-sm-between align-items-sm-center">
                      <span class="col-sm-6 mb-2 mb-sm-0">
                        Business Strategy Manager
                      </span>
                      <span class="col-sm-6 text-primary text-sm-right">
                        Chicago, US
                        <span class="fas fa-arrow-right small ml-2"></span>
                      </span>
                    </span>
                  </div>
                </a>
                <!-- End Card -->

                <!-- Card -->
                <a class="card card-frame card-text-dark mb-2" href="../pages/careers-single.html">
                  <div class="card-body p-4">
                    <span class="row justify-content-sm-between align-items-sm-center">
                      <span class="col-sm-6 mb-2 mb-sm-0">
                        Business Strategy Senior Associate
                      </span>
                      <span class="col-sm-6 text-primary text-sm-right">
                        New York, US
                        <span class="fas fa-arrow-right small ml-2"></span>
                      </span>
                    </span>
                  </div>
                </a>
                <!-- End Card -->

                <!-- Card -->
                <a class="card card-frame card-text-dark mb-2" href="../pages/careers-single.html">
                  <div class="card-body p-4">
                    <span class="row justify-content-sm-between align-items-sm-center">
                      <span class="col-sm-6 mb-2 mb-sm-0">
                        Senior Analyst, Data Analytics
                      </span>
                      <span class="col-sm-6 text-primary text-sm-right">
                        Sydney, Australia
                        <span class="fas fa-arrow-right small ml-2"></span>
                      </span>
                    </span>
                  </div>
                </a>
                <!-- End Card -->
              
            

Info #2

              
                <div class="card-deck d-block d-lg-flex card-lg-gutters-2">
                  <div class="card card-frame transition-3d-hover mb-3">
                    <!-- Card -->
                    <a class="card-body" href="#">
                      <div class="media">
                        <div class="u-avatar">
                          <img class="img-fluid rounded" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
                        </div>
                        <div class="media-body px-4">
                          <h4 class="h6 text-dark mb-1">Senior Java Developer</h4>
                          <small class="d-block text-muted">London, UK</small>
                        </div>
                      </div>
                    </a>
                    <!-- End Card -->
                  </div>

                  <div class="card card-frame transition-3d-hover mb-3">
                    <!-- Card -->
                    <a class="card-body" href="#">
                      <div class="media">
                        <div class="u-avatar">
                          <img class="img-fluid rounded" src="../../assets/img/160x160/img4.jpg" alt="Image Description">
                        </div>
                        <div class="media-body px-4">
                          <h4 class="h6 text-dark mb-1">Junior UX Designer</h4>
                          <small class="d-block text-muted">Manchester, UK</small>
                        </div>
                      </div>
                    </a>
                    <!-- End Card -->
                  </div>

                  <div class="card card-frame transition-3d-hover mb-3">
                    <!-- Card -->
                    <a class="card-body" href="#">
                      <div class="media">
                        <div class="u-avatar">
                          <img class="img-fluid rounded" src="../../assets/img/160x160/img5.jpg" alt="Image Description">
                        </div>
                        <div class="media-body px-4">
                          <h4 class="h6 text-dark mb-1">Product Director</h4>
                          <small class="d-block text-muted">New York, NY</small>
                        </div>
                      </div>
                    </a>
                    <!-- End Card -->
                  </div>
                </div>
              
            

Info #3

              
                <div class="card-deck d-block d-lg-flex card-lg-gutters-3">
                  <!-- Card -->
                  <div class="card card-frame mb-3">
                    <a class="card-body p-4" href="#">
                      <div class="media align-items-center">
                        <div class="u-avatar mr-3">
                          <img class="img-fluid rounded-circle" src="../../assets/img/160x160/img5.jpg" alt="Image Description">
                        </div>
                        <div class="media-body">
                          <span class="text-dark">Spotify</span>
                          <small class="d-block text-secondary">Logo redesign</small>
                        </div>
                        <div class="media-body text-right">
                          <span class="text-primary ml-3">
                            $1,903
                          </span>
                        </div>
                      </div>
                    </a>
                  </div>
                  <!-- End Card -->

                  <!-- Card -->
                  <div class="card card-frame mb-3">
                    <a class="card-body p-4" href="#">
                      <div class="media align-items-center">
                        <div class="u-avatar mr-3">
                          <img class="img-fluid rounded-circle" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
                        </div>
                        <div class="media-body">
                          <span class="text-dark">Slack</span>
                          <small class="d-block text-secondary">Page redesign</small>
                        </div>
                        <div class="media-body text-right">
                          <span class="text-primary ml-3">
                            $3,500
                          </span>
                        </div>
                      </div>
                    </a>
                  </div>
                  <!-- End Card -->

                  <!-- Card -->
                  <div class="card card-frame mb-3">
                    <a class="card-body p-4" href="#">
                      <div class="media align-items-center">
                        <div class="u-avatar mr-3">
                          <img class="img-fluid rounded-circle" src="../../assets/img/160x160/img6.jpg" alt="Image Description">
                        </div>
                        <div class="media-body">
                          <span class="text-dark">Dropbox</span>
                          <small class="d-block text-secondary">Branding</small>
                        </div>
                        <div class="media-body text-right">
                          <span class="text-primary ml-3">
                            $7,250
                          </span>
                        </div>
                      </div>
                    </a>
                  </div>
                  <!-- End Card -->
                </div>
              
            

Info #4

Work experience

Image Description
Jul 2018

Senior Frontend Developer

at Google - SF, US
Image Description
Aug 2016 - Jul 2018

Junior Frontend Developer

at Slack Inc - London, UK

Education

Image Description
Sep 2009 - June 2013

BS in Computer Science

Harvard University
Image Description
Sep 2014 - June 2016

MBA in Marketing

University of British Columbia
              
                <!-- Info -->
                <div class="row mb-7">
                  <div class="col-md-6 mb-7 mb-md-0">
                    <!-- Title -->
                    <div class="mb-3">
                      <h3 class="h6 mb-0">Work experience</h3>
                    </div>
                    <!-- End Title -->

                    <!-- Info -->
                    <div class="d-flex mb-5">
                      <img class="u-avatar align-self-center mr-4" src="../../assets/img/160x160/img17.png" alt="Image Description">
                      <div>
                        <small class="d-block text-secondary">Jul 2018</small>
                        <h4 class="h6 mb-0">Senior Frontend Developer</h4>
                        <span class="d-block text-secondary">at Google - SF, US</span>
                      </div>
                    </div>
                    <!-- End Info -->

                    <!-- Info -->
                    <div class="d-flex">
                      <img class="u-avatar align-self-center mr-4" src="../../assets/img/160x160/img14.png" alt="Image Description">
                      <div>
                        <small class="d-block text-secondary">Aug 2016 - Jul 2018</small>
                        <h4 class="h6 mb-0">Junior Frontend Developer</h4>
                        <span class="d-block text-secondary">at Slack Inc - London, UK</span>
                      </div>
                    </div>
                    <!-- End Info -->
                  </div>

                  <div class="col-md-6 mb-3 mb-md-0">
                    <!-- Title -->
                    <div class="mb-3">
                      <h3 class="h6 mb-0">Education</h3>
                    </div>
                    <!-- End Title -->

                    <!-- Info -->
                    <div class="row align-items-center mb-5">
                      <div class="col-4">
                        <img class="img-fluid" src="../../assets/img/logos/harvard-university.png" alt="Image Description">
                      </div>
                      <div class="col-8">
                        <small class="d-block text-secondary">Sep 2009 - June 2013</small>
                        <h4 class="h6 mb-0">BS in Computer Science</h4>
                        <span class="d-block text-secondary">Harvard University</span>
                      </div>
                    </div>
                    <!-- End Info -->

                    <!-- Info -->
                    <div class="row align-items-center">
                      <div class="col-4">
                        <img class="img-fluid" src="../../assets/img/logos/ubc.png" alt="Image Description">
                      </div>
                      <div class="col-8">
                        <small class="d-block text-secondary">Sep 2014 - June 2016</small>
                        <h4 class="h6 mb-0">MBA in Marketing</h4>
                        <span class="d-block text-secondary">University of British Columbia</span>
                      </div>
                    </div>
                    <!-- End Info -->
                  </div>
                </div>
                <!-- End Info -->
              
            

Info #5

Image Description

Mapbox

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

Members

Budget

$9,145

Priority

Medium
              
                <!-- Projects -->
                <div class="card">
                  <div class="card-body p-5">
                    <!-- List of Icons -->
                    <div class="row justify-content-between align-items-center mb-3">
                      <div class="col-6">
                        <a class="small text-secondary" href="#">
                          <span class="fas fa-bookmark text-primary mr-1"></span>
                          FR-52
                        </a>
                      </div>
                      <div class="col-6 text-right">
                        <!-- Settings -->
                        <div class="position-relative">
                          <a id="settingsDropdown1InvokerExample1" class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent rounded" href="javascript:;" role="button"
                             aria-controls="settingsDropdown1"
                             aria-haspopup="true"
                             aria-expanded="false"
                             data-unfold-event="click"
                             data-unfold-target="#settingsDropdown1"
                             data-unfold-type="css-animation"
                             data-unfold-duration="300"
                             data-unfold-delay="300"
                             data-unfold-hide-on-scroll="true"
                             data-unfold-animation-in="slideInUp"
                             data-unfold-animation-out="fadeOut">
                            <span class="fas fa-ellipsis-h btn-icon__inner"></span>
                          </a>

                          <div id="settingsDropdown1" class="dropdown-menu dropdown-unfold dropdown-menu-right" aria-labelledby="settingsDropdown1InvokerExample1" style="min-width: 160px;">
                            <a class="dropdown-item" href="#">
                              <small class="fas fa-cogs dropdown-item-icon"></small>
                              Settings
                            </a>
                            <a class="dropdown-item" href="#">
                              <small class="fas fa-code-branch dropdown-item-icon"></small>
                              Repository
                            </a>
                            <a class="dropdown-item" href="#">
                              <small class="fas fa-cloud-download-alt dropdown-item-icon"></small>
                              Download
                            </a>
                            <a class="dropdown-item" href="#">
                              <small class="fas fa-archive dropdown-item-icon"></small>
                              Archive
                            </a>
                          </div>
                        </div>
                        <!-- End Settings -->
                      </div>
                    </div>
                    <!-- End List of Icons -->

                    <!-- Details -->
                    <div class="d-sm-flex">
                      <div class="u-lg-avatar mb-3 mb-sm-0 mr-3">
                        <img class="img-fluid rounded-circle" src="../../assets/img/160x160/img4.jpg" alt="Image Description">
                      </div>

                      <div class="mr-3">
                        <!-- Title -->
                        <div class="mb-3">
                          <h3 class="h5 mb-1">Mapbox</h3>
                          <p class="font-size-1">The time has come to bring those ideas and plans to life.</p>
                        </div>
                        <!-- End Title -->

                        <div class="d-sm-flex align-items-sm-center">
                          <!-- Members List -->
                          <div class="mb-3 mb-sm-0 mr-4">
                            <h4 class="small font-weight-normal text-secondary mb-0">Members</h4>

                            <ul class="list-inline mb-0">
                              <li class="list-inline-item mr-0" data-toggle="tooltip" data-placement="top" title="Sean Lewis">
                                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                                  <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img1.jpg" alt="Image Description">
                                </div>
                              </li>
                              <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="James Collins">
                                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                                  <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img2.jpg" alt="Image Description">
                                </div>
                              </li>
                              <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Eliza Donovan">
                                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                                  <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img3.jpg" alt="Image Description">
                                </div>
                              </li>
                              <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Cler Lockhart">
                                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                                  <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img5.jpg" alt="Image Description">
                                </div>
                              </li>
                              <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Josephina Mack">
                                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                                  <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img4.jpg" alt="Image Description">
                                </div>
                              </li>
                              <li class="list-inline-item ml-n3 mr-0">
                                <a class="btn btn-sm btn-icon btn-light rounded-circle" href="#">
                                  <span class="btn-icon__inner">+3</span>
                                </a>
                              </li>
                            </ul>
                          </div>
                          <!-- End Members List -->

                          <!-- Budget -->
                          <div class="u-ver-divider u-ver-divider--none-sm pr-4 mb-3 mb-sm-0 mr-4">
                            <h4 class="small font-weight-normal text-secondary mb-0">Budget</h4>
                            <span class="text-dark">$9,145</span>
                          </div>
                          <!-- End Budget -->

                          <!-- Priority -->
                          <div class="mr-4">
                            <h4 class="small font-weight-normal text-secondary mb-0">Priority</h4>
                            <span class="fas fa-arrow-up text-warning small"></span>
                            <span class="text-dark">Medium</span>
                          </div>
                          <!-- End Priority -->
                        </div>
                      </div>
                    </div>
                    <!-- End Details -->
                  </div>
                </div>
                <!-- End Projects -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/js/components/hs.unfold.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of unfold component
                    $.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
                  });
                </script>
              
            

Info #6

              
                <div class="card-deck d-block d-lg-flex card-lg-gutters-2">
                  <!-- Friends List -->
                  <a class="card card-frame mb-3" href="#">
                    <div class="card-body">
                      <div class="media">
                        <div class="u-avatar mr-3">
                          <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img9.jpg" alt="Image Description">
                        </div>
                        <div class="media-body">
                          <h4 class="h6 text-dark mb-0">Patrick Garner</h4>
                          <span>Refer</span>
                        </div>
                      </div>
                    </div>
                  </a>
                  <!-- End Friends List -->

                  <!-- Friends List -->
                  <a class="card card-frame mb-3" href="#">
                    <div class="card-body">
                      <div class="media">
                        <span class="btn btn-icon btn-soft-primary rounded-circle mr-3">
                          <span class="btn-icon__inner">CB</span>
                        </span>
                        <div class="media-body">
                          <h4 class="h6 text-dark mb-0">Cameron Brown</h4>
                          <span>Refer</span>
                        </div>
                      </div>
                    </div>
                  </a>
                  <!-- End Friends List -->

                  <!-- Friends List -->
                  <a class="card card-frame mb-3" href="#">
                    <div class="card-body">
                      <div class="media">
                        <div class="u-avatar mr-3">
                          <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
                        </div>
                        <div class="media-body">
                          <h4 class="h6 text-dark mb-0">Sebastian Diaz</h4>
                          <span>Refer</span>
                        </div>
                      </div>
                    </div>
                  </a>
                  <!-- End Friends List -->
                </div>
              
            

Info #7

              
                <!-- Contacts  -->
                <div class="card mb-4">
                  <div class="card-header pt-4 pb-3 px-0 mx-4">
                    <h2 class="h6 mb-0">Contacts</h2>
                  </div>

                  <div class="card-body pt-3 pb-4 px-4">
                    <!-- User -->
                    <a class="d-flex align-items-start mb-4" href="#">
                      <div class="position-relative u-avatar">
                        <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img9.jpg" alt="Image Description">
                        <span class="badge badge-xs badge-outline-success badge-pos badge-pos--bottom-right rounded-circle"></span>
                      </div>

                      <div class="ml-3">
                        <span class="d-block text-dark">Patrick Garner</span>
                        <small class="d-block text-secondary">Web Developer</small>
                      </div>
                    </a>
                    <!-- End User -->

                    <!-- User -->
                    <a class="d-flex align-items-start mb-4" href="#">
                      <span class="btn btn-icon btn-soft-danger rounded-circle">
                        <span class="btn-icon__inner">AO</span>
                        <span class="badge badge-xs badge-outline-warning badge-pos badge-pos--bottom-right rounded-circle"></span>
                      </span>

                      <div class="ml-3">
                        <span class="d-block text-dark">Amanta Owens</span>
                        <small class="d-block text-secondary">UI/UX Designer</small>
                      </div>
                    </a>
                    <!-- End User -->

                    <!-- User -->
                    <a class="d-flex align-items-start mb-4" href="#">
                      <div class="position-relative u-avatar">
                        <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
                        <span class="badge badge-xs badge-outline-warning badge-pos badge-pos--bottom-right rounded-circle"></span>
                      </div>

                      <div class="ml-3">
                        <span class="d-block text-dark">Eliza Donovan</span>
                        <small class="d-block text-secondary">Project Manager</small>
                      </div>
                    </a>
                    <!-- End User -->

                    <!-- User -->
                    <a class="d-flex align-items-start" href="#">
                      <span class="btn btn-icon btn-soft-success rounded-circle">
                        <span class="btn-icon__inner">JC</span>
                        <span class="badge badge-xs badge-outline-success badge-pos badge-pos--bottom-right rounded-circle"></span>
                      </span>

                      <div class="ml-3">
                        <span class="d-block text-dark">James Collins</span>
                        <small class="d-block text-secondary">Angular Developer</small>
                      </div>
                    </a>
                    <!-- End User -->
                  </div>
                </div>
                <!-- End Contacts  -->
              
            

Info #8

Image Description

IT business manager

London, UK

View Details
Image Description

Membership director

Manchester, UK

View Details
Image Description

UI/UX designer

New York, NY

View Details
              
                <div class="card-deck d-block d-lg-flex card-lg-gutters-3">
                  <div class="card card-frame text-center mb-5">
                    <!-- Card -->
                    <div class="card-body p-6">
                      <div class="u-avatar mx-auto mb-4">
                        <img class="img-fluid rounded" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
                      </div>
                      <div class="mb-4">
                        <h4 class="h6 mb-1">IT business manager</h4>
                        <p>London, UK</p>
                      </div>
                      <a class="btn btn-sm btn-soft-primary btn-wide" href="#">View Details</a>
                    </div>
                    <!-- End Card -->
                  </div>

                  <div class="card card-frame text-center mb-5">
                    <!-- Card -->
                    <div class="card-body p-6">
                      <div class="u-avatar mx-auto mb-4">
                        <img class="img-fluid rounded" src="../../assets/img/160x160/img4.jpg" alt="Image Description">
                      </div>
                      <div class="mb-4">
                        <h4 class="h6 mb-1">Membership director</h4>
                        <p>Manchester, UK</p>
                      </div>
                      <a class="btn btn-sm btn-soft-primary btn-wide" href="#">View Details</a>
                    </div>
                    <!-- End Card -->
                  </div>

                  <div class="card card-frame text-center mb-5">
                    <!-- Card -->
                    <div class="card-body p-6">
                      <div class="u-avatar mx-auto mb-4">
                        <img class="img-fluid rounded" src="../../assets/img/160x160/img5.jpg" alt="Image Description">
                      </div>
                      <div class="mb-4">
                        <h4 class="h6 mb-1">UI/UX designer</h4>
                        <p>New York, NY</p>
                      </div>
                      <a class="btn btn-sm btn-soft-primary btn-wide" href="#">View Details</a>
                    </div>
                    <!-- End Card -->
                  </div>
                </div>
              
            

Info #9

Image Description

Mapbox

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

Members

Image Description

Slack

Using our creative gifts drives this foundation.

Members

Image Description

DropBox

It's important to stay detail oriented with every project we tackle.

Members

              
                <div class="card-deck d-block d-md-flex">
                  <!-- Projects -->
                  <div class="card mb-5">
                    <div class="card-body p-4">
                      <!-- List of Icons -->
                      <div class="row justify-content-between align-items-center mb-4">
                        <div class="col-6">
                          <a class="small text-secondary" href="#">
                            <span class="fas fa-bookmark text-primary mr-1"></span>
                            FR-52
                          </a>
                        </div>
                        <div class="col-6 text-right">
                          <!-- Settings -->
                          <div class="position-relative">
                            <a id="settingsDropdown1InvokerExample2" class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent rounded" href="javascript:;" role="button"
                               aria-controls="settingsDropdownExample2"
                               aria-haspopup="true"
                               aria-expanded="false"
                               data-unfold-event="click"
                               data-unfold-target="#settingsDropdownExample2"
                               data-unfold-type="css-animation"
                               data-unfold-duration="300"
                               data-unfold-delay="300"
                               data-unfold-hide-on-scroll="true"
                               data-unfold-animation-in="slideInUp"
                               data-unfold-animation-out="fadeOut">
                              <span class="fas fa-ellipsis-h btn-icon__inner"></span>
                            </a>

                            <div id="settingsDropdownExample2" class="dropdown-menu dropdown-unfold" aria-labelledby="settingsDropdown1InvokerExample2" style="min-width: 160px;">
                              <a class="dropdown-item" href="#">
                                <small class="fas fa-cogs dropdown-item-icon"></small>
                                Settings
                              </a>
                              <a class="dropdown-item" href="#">
                                <small class="fas fa-code-branch dropdown-item-icon"></small>
                                Repository
                              </a>
                              <a class="dropdown-item" href="#">
                                <small class="fas fa-cloud-download-alt dropdown-item-icon"></small>
                                Download
                              </a>
                              <a class="dropdown-item" href="#">
                                <small class="fas fa-archive dropdown-item-icon"></small>
                                Archive
                              </a>
                            </div>
                          </div>
                          <!-- End Settings -->
                        </div>
                      </div>
                      <!-- End List of Icons -->

                      <div class="text-center">
                        <div class="u-lg-avatar mx-auto mb-3">
                          <img class="img-fluid rounded-circle" src="../../assets/img/160x160/img4.jpg" alt="Image Description">
                        </div>

                        <!-- Title -->
                        <div class="mb-4">
                          <h3 class="h5 mb-1">Mapbox</h3>
                          <p class="font-size-1">The time has come to bring those ideas and plans to life.</p>
                        </div>
                        <!-- End Title -->

                        <h4 class="h6 font-weight-normal mb-1">Members</h4>

                        <!-- Members List -->
                        <ul class="list-inline mb-0">
                          <li class="list-inline-item mr-0" data-toggle="tooltip" data-placement="top" title="Patrick Garner">
                            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img1.jpg" alt="Image Description">
                            </div>
                          </li>
                          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="James Collins">
                            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img2.jpg" alt="Image Description">
                            </div>
                          </li>
                          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Eliza Donovan">
                            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img3.jpg" alt="Image Description">
                            </div>
                          </li>
                          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Cler Lockhart">
                            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img5.jpg" alt="Image Description">
                            </div>
                          </li>
                          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Josephina Mack">
                            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img4.jpg" alt="Image Description">
                            </div>
                          </li>
                          <li class="list-inline-item ml-n3 mr-0">
                            <a class="btn btn-sm btn-icon btn-light rounded-circle" href="#">
                              <span class="btn-icon__inner">+3</span>
                            </a>
                          </li>
                        </ul>
                        <!-- End Members List -->
                      </div>
                    </div>

                    <div class="card-footer text-center">
                      <!-- Budget & Priority -->
                      <div class="row align-items-center">
                        <div class="col-6 u-ver-divider">
                          <h5 class="small font-weight-normal text-secondary mb-0">Budget</h5>
                          <span class="text-dark">$9,145</span>
                        </div>
                        <div class="col-6">
                          <h5 class="small font-weight-normal text-secondary mb-0">Priority</h5>
                          <span class="fas fa-arrow-up text-warning small"></span>
                          <span class="text-dark">Medium</span>
                        </div>
                      </div>
                      <!-- End Budget & Priority -->
                    </div>
                  </div>
                  <!-- End Projects -->

                  <!-- Projects -->
                  <div class="card mb-5">
                    <div class="card-body p-4">
                      <!-- List of Icons -->
                      <div class="row justify-content-between align-items-center mb-4">
                        <div class="col-6">
                          <a class="small text-secondary" href="#">
                            <span class="fas fa-bookmark text-primary mr-1"></span>
                            FR-13
                          </a>
                        </div>
                        <div class="col-6 text-right">
                          <!-- Settings -->
                          <div class="position-relative">
                            <a id="settingsDropdown2Invoker" class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent rounded" href="javascript:;" role="button"
                               aria-controls="settingsDropdown2"
                               aria-haspopup="true"
                               aria-expanded="false"
                               data-unfold-event="click"
                               data-unfold-target="#settingsDropdown2"
                               data-unfold-type="css-animation"
                               data-unfold-duration="300"
                               data-unfold-delay="300"
                               data-unfold-hide-on-scroll="true"
                               data-unfold-animation-in="slideInUp"
                               data-unfold-animation-out="fadeOut">
                              <span class="fas fa-ellipsis-h btn-icon__inner"></span>
                            </a>

                            <div id="settingsDropdown2" class="dropdown-menu dropdown-unfold" aria-labelledby="settingsDropdown2Invoker" style="min-width: 160px;">
                              <a class="dropdown-item" href="#">
                                <small class="fas fa-cogs dropdown-item-icon"></small>
                                Settings
                              </a>
                              <a class="dropdown-item" href="#">
                                <small class="fas fa-code-branch dropdown-item-icon"></small>
                                Repository
                              </a>
                              <a class="dropdown-item" href="#">
                                <small class="fas fa-cloud-download-alt dropdown-item-icon"></small>
                                Download
                              </a>
                              <a class="dropdown-item" href="#">
                                <small class="fas fa-archive dropdown-item-icon"></small>
                                Archive
                              </a>
                            </div>
                          </div>
                          <!-- End Settings -->
                        </div>
                      </div>
                      <!-- End List of Icons -->

                      <div class="text-center">
                        <div class="u-lg-avatar mx-auto mb-3">
                          <img class="img-fluid rounded-circle" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
                        </div>

                        <!-- Title -->
                        <div class="mb-4">
                          <h3 class="h5 mb-1">Slack</h3>
                          <p class="font-size-1">Using our creative gifts drives this foundation.</p>
                        </div>
                        <!-- End Title -->

                        <h4 class="h6 font-weight-normal mb-1">Members</h4>

                        <!-- Members List -->
                        <ul class="list-inline mb-0">
                          <li class="list-inline-item mr-0" data-toggle="tooltip" data-placement="top" title="Josephina Mack">
                            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img4.jpg" alt="Image Description">
                            </div>
                          </li>
                          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="James Collins">
                            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img2.jpg" alt="Image Description">
                            </div>
                          </li>
                          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Cler Lockhart">
                            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img5.jpg" alt="Image Description">
                            </div>
                          </li>
                          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Sean Lewis">
                            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img1.jpg" alt="Image Description">
                            </div>
                          </li>
                          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Eliza Donovan">
                            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img3.jpg" alt="Image Description">
                            </div>
                          </li>
                          <li class="list-inline-item ml-n3 mr-0">
                            <a class="btn btn-sm btn-icon btn-light rounded-circle" href="#">
                              <span class="btn-icon__inner">+1</span>
                            </a>
                          </li>
                        </ul>
                        <!-- End Members List -->
                      </div>
                    </div>

                    <div class="card-footer text-center">
                      <!-- Budget & Priority -->
                      <div class="row align-items-center">
                        <div class="col-6 u-ver-divider">
                          <h5 class="small font-weight-normal text-secondary mb-0">Budget</h5>
                          <span class="text-dark">$3,120</span>
                        </div>
                        <div class="col-6">
                          <h5 class="small font-weight-normal text-secondary mb-0">Priority</h5>
                          <span class="fas fa-arrow-down text-success small"></span>
                          <span class="text-dark">Low</span>
                        </div>
                      </div>
                      <!-- End Budget & Priority -->
                    </div>
                  </div>
                  <!-- End Projects -->

                  <!-- Projects -->
                  <div class="card mb-5">
                    <div class="card-body p-4">
                      <!-- List of Icons -->
                      <div class="row justify-content-between align-items-center mb-4">
                        <div class="col-6">
                          <a class="small text-secondary" href="#">
                            <span class="fas fa-bookmark text-primary mr-1"></span>
                            FR-36
                          </a>
                        </div>
                        <div class="col-6 text-right">
                          <!-- Settings -->
                          <div class="position-relative">
                            <a id="settingsDropdown3Invoker" class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent rounded" href="javascript:;" role="button"
                               aria-controls="settingsDropdown3"
                               aria-haspopup="true"
                               aria-expanded="false"
                               data-unfold-event="click"
                               data-unfold-target="#settingsDropdown3"
                               data-unfold-type="css-animation"
                               data-unfold-duration="300"
                               data-unfold-delay="300"
                               data-unfold-hide-on-scroll="true"
                               data-unfold-animation-in="slideInUp"
                               data-unfold-animation-out="fadeOut">
                              <span class="fas fa-ellipsis-h btn-icon__inner"></span>
                            </a>

                            <div id="settingsDropdown3" class="dropdown-menu dropdown-unfold" aria-labelledby="settingsDropdown3Invoker" style="min-width: 160px;">
                              <a class="dropdown-item" href="#">
                                <small class="fas fa-cogs dropdown-item-icon"></small>
                                Settings
                              </a>
                              <a class="dropdown-item" href="#">
                                <small class="fas fa-code-branch dropdown-item-icon"></small>
                                Repository
                              </a>
                              <a class="dropdown-item" href="#">
                                <small class="fas fa-cloud-download-alt dropdown-item-icon"></small>
                                Download
                              </a>
                              <a class="dropdown-item" href="#">
                                <small class="fas fa-archive dropdown-item-icon"></small>
                                Archive
                              </a>
                            </div>
                          </div>
                          <!-- End Settings -->
                        </div>
                      </div>
                      <!-- End List of Icons -->

                      <div class="text-center">
                        <div class="u-lg-avatar mx-auto mb-3">
                          <img class="img-fluid rounded-circle" src="../../assets/img/160x160/img6.jpg" alt="Image Description">
                        </div>

                        <!-- Title -->
                        <div class="mb-4">
                          <h3 class="h5 mb-1">DropBox</h3>
                          <p class="font-size-1">It's important to stay detail oriented with every project we tackle.</p>
                        </div>
                        <!-- End Title -->

                        <h4 class="h6 font-weight-normal mb-1">Members</h4>

                        <!-- Members List -->
                        <ul class="list-inline mb-0">
                          <li class="list-inline-item mr-0" data-toggle="tooltip" data-placement="top" title="James Collins">
                            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img2.jpg" alt="Image Description">
                            </div>
                          </li>
                          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Josephina Mack">
                            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img4.jpg" alt="Image Description">
                            </div>
                          </li>
                          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Eliza Donovan">
                            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img3.jpg" alt="Image Description">
                            </div>
                          </li>
                          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Sean Lewis">
                            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img1.jpg" alt="Image Description">
                            </div>
                          </li>
                          <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Cler Lockhart">
                            <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                              <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img5.jpg" alt="Image Description">
                            </div>
                          </li>
                          <li class="list-inline-item ml-n3 mr-0">
                            <a class="btn btn-sm btn-icon btn-light rounded-circle" href="#">
                              <span class="btn-icon__inner">+9</span>
                            </a>
                          </li>
                        </ul>
                        <!-- End Members List -->
                      </div>
                    </div>

                    <div class="card-footer text-center">
                      <!-- Budget & Priority -->
                      <div class="row align-items-center">
                        <div class="col-6 u-ver-divider">
                          <h5 class="small font-weight-normal text-secondary mb-0">Budget</h5>
                          <span class="text-dark">$15,000</span>
                        </div>
                        <div class="col-6">
                          <h5 class="small font-weight-normal text-secondary mb-0">Priority</h5>
                          <span class="fas fa-arrow-up text-danger small"></span>
                          <span class="text-dark">Highest</span>
                        </div>
                      </div>
                      <!-- End Budget & Priority -->
                    </div>
                  </div>
                  <!-- End Projects -->
                </div>
              
            

Info #10

Front project - July 2018 $250 per year

License purchased: 1

License assigned: 1

Change plan Edit/Remove License

Total

$250/yearly

Payment method: Card ending in 9050

Will renew on: July 15, 2019

Edit Payment Details View Invoices
              
                <div class="card-deck d-block d-md-flex">
                  <div class="card mb-4 mb-md-0">
                    <!-- Card -->
                    <div class="card-body p-5">
                      <h4 class="h6">Front project - July 2018 <span class="u-label u-label--sm u-label--success">$250 per year</span></h4>
                      <p class="font-size-1 mb-0">License purchased: <span class="text-dark font-weight-medium">1</span></p>
                      <p class="font-size-1">License assigned: <span class="text-dark font-weight-medium">1</span></p>
                    <a class="btn btn-xs btn-primary transition-3d-hover mr-1" href="#">Change plan</a>
                      <a class="btn btn-xs btn-soft-secondary transition-3d-hover" href="#">Edit/Remove License</a>
                    </div>
                    <!-- End Card -->
                  </div>

                  <div class="card">
                    <!-- Card -->
                    <div class="card-body p-5">
                      <h4 class="h6">Total</h4>
                      <h5 class="font-weight-normal">$250/yearly</h5>
                      <p class="font-size-1 mb-0">Payment method: <span class="text-dark font-weight-medium">Card ending in 9050</span></p>
                      <p class="font-size-1">Will renew on: <span class="text-dark font-weight-medium">July 15, 2019</span></p>
                    <a class="btn btn-xs btn-primary transition-3d-hover mr-1" href="#">Edit Payment Details</a>
                      <a class="btn btn-xs btn-soft-secondary transition-3d-hover" href="#">View Invoices</a>
                      <!-- End Card -->
                    </div>
                  </div>
                </div>
              
            

Info #11

              
                <div class="card-deck d-block d-md-flex">
                  <!-- Members -->
                  <div class="card text-center mb-3 mb-5">
                    <div class="card-body p-6">
                      <!-- Team -->
                      <div class="mb-4">
                        <div class="position-relative u-lg-avatar mx-auto mb-3">
                          <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img9.jpg" alt="Image Description">
                          <span class="badge badge-xs badge-outline-primary badge-pos badge-pos--bottom-left rounded-circle"></span>
                        </div>

                        <a class="btn btn-sm btn-icon btn-soft-warning btn-bg-transparent position-absolute top-0 right-0 rounded-circle m-3" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Add to favorites">
                          <span class="far fa-star btn-icon__inner"></span>
                        </a>

                        <h2 class="h6 mb-0">
                          <a href="#">Patrick Garner</a>
                        </h2>
                        <a class="small" href="#">@patrickgarner</a>
                      </div>
                      <!-- End Team -->

                      <!-- Social Networks -->
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item">
                          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                            <span class="fab fa-facebook-f btn-icon__inner"></span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                            <span class="fab fa-google btn-icon__inner"></span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                            <span class="fab fa-twitter btn-icon__inner"></span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                            <span class="fab fa-github btn-icon__inner"></span>
                          </a>
                        </li>
                      </ul>
                      <!-- End Social Networks -->
                    </div>

                    <div class="card-footer py-4 px-6">
                      <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
                        <span class="far fa-envelope mr-2"></span>
                        Send a Message
                      </a>
                    </div>
                  </div>
                  <!-- End Members -->

                  <!-- Members -->
                  <div class="card text-center mb-3 mb-5">
                    <div class="card-body p-6">
                      <!-- Team -->
                      <div class="mb-4">
                        <span class="btn btn-lg btn-icon btn-soft-danger rounded-circle mb-3">
                          <span class="btn-icon__inner">AO</span>
                          <span class="badge badge-xs badge-outline-danger badge-pos badge-pos--bottom-left rounded-circle"></span>
                        </span>

                        <a class="btn btn-sm btn-icon btn-soft-warning btn-bg-transparent position-absolute top-0 right-0 rounded-circle m-3" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Add to favorites">
                          <span class="far fa-star btn-icon__inner"></span>
                        </a>

                        <h2 class="h6 mb-0">
                          <a href="#">Amanta Owens</a>
                        </h2>
                        <a class="small" href="#">@uidesginer</a>
                      </div>
                      <!-- End Team -->

                      <!-- Social Networks -->
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item">
                          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                            <span class="fab fa-facebook-f btn-icon__inner"></span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                            <span class="fab fa-google btn-icon__inner"></span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                            <span class="fab fa-twitter btn-icon__inner"></span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                            <span class="fab fa-github btn-icon__inner"></span>
                          </a>
                        </li>
                      </ul>
                      <!-- End Social Networks -->
                    </div>

                    <div class="card-footer py-4 px-6">
                      <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
                        <span class="far fa-envelope mr-2"></span>
                        Send a Message
                      </a>
                    </div>
                  </div>
                  <!-- End Members -->

                  <!-- Members -->
                  <div class="card text-center mb-3 mb-5">
                    <div class="card-body p-6">
                      <!-- Team -->
                      <div class="mb-4">
                        <div class="position-relative u-lg-avatar mx-auto mb-3">
                          <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
                          <span class="badge badge-xs badge-outline-primary badge-pos badge-pos--bottom-left rounded-circle"></span>
                        </div>

                        <a class="btn btn-sm btn-icon btn-soft-warning btn-bg-transparent position-absolute top-0 right-0 rounded-circle m-3" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Add to favorites">
                          <span class="far fa-star btn-icon__inner"></span>
                        </a>

                        <h2 class="h6 mb-0">
                          <a href="#">Sebastian Diaz</a>
                        </h2>
                        <a class="small" href="#">@gamechanger</a>
                      </div>
                      <!-- End Team -->

                      <!-- Social Networks -->
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item">
                          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                            <span class="fab fa-facebook-f btn-icon__inner"></span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                            <span class="fab fa-google btn-icon__inner"></span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                            <span class="fab fa-twitter btn-icon__inner"></span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                            <span class="fab fa-github btn-icon__inner"></span>
                          </a>
                        </li>
                      </ul>
                      <!-- End Social Networks -->
                    </div>

                    <div class="card-footer py-4 px-6">
                      <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
                        <span class="far fa-envelope mr-2"></span>
                        Send a Message
                      </a>
                    </div>
                  </div>
                  <!-- End Members -->
                </div>
              
            

Info #12

              
                <!-- Team -->
                <div class="card position-relative mb-5">
                  <div class="card-body position-relative p-3">
                    <div class="row align-items-center">
                      <div class="col-sm-7 mb-3 mb-sm-0">
                        <div class="d-flex">
                          <!-- Avatar -->
                          <div class="position-relative u-lg-avatar mr-3">
                            <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img9.jpg" alt="Image Description">
                            <span class="badge badge-xs badge-outline-primary badge-pos badge-pos--bottom-left rounded-circle"></span>
                          </div>
                          <!-- End Avatar -->

                          <div class="mr-3">
                            <!-- User Info -->
                            <div class="mb-2">
                              <h2 class="h6 mb-0">
                                <a href="#">Patrick Garner</a>
                              </h2>
                              <a class="small" href="#">@patrickgarner</a>
                            </div>
                            <!-- End User Info -->

                            <!-- Social Networks -->
                            <ul class="list-inline mb-0">
                              <li class="list-inline-item mr-0">
                                <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                                  <span class="fab fa-facebook-f btn-icon__inner"></span>
                                </a>
                              </li>
                              <li class="list-inline-item mr-0">
                                <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                                  <span class="fab fa-google btn-icon__inner"></span>
                                </a>
                              </li>
                              <li class="list-inline-item mr-0">
                                <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                                  <span class="fab fa-twitter btn-icon__inner"></span>
                                </a>
                              </li>
                              <li class="list-inline-item mr-0">
                                <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                                  <span class="fab fa-github btn-icon__inner"></span>
                                </a>
                              </li>
                            </ul>
                            <!-- End Social Networks -->
                          </div>
                        </div>
                      </div>

                      <div class="col-sm-5 align-self-sm-end">
                        <!-- Button -->
                        <div class="text-sm-right">
                          <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
                            <span class="far fa-envelope mr-2"></span>
                            Send a Message
                          </a>
                        </div>
                        <!-- End Button -->
                      </div>
                    </div>

                    <!-- Add to Favorites -->
                    <a class="btn btn-sm btn-icon btn-soft-warning btn-bg-transparent position-absolute top-0 right-0 rounded-circle mt-3 mr-3" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Add to favorites">
                      <span class="far fa-star btn-icon__inner"></span>
                    </a>
                    <!-- End Add to Favorites -->
                  </div>
                </div>
                <!-- End Team -->

                <!-- Team -->
                <div class="card position-relative">
                  <div class="card-body p-3">
                    <div class="row align-items-center">
                      <div class="col-sm-7 mb-3 mb-sm-0">
                        <div class="d-flex">
                          <!-- Avatar -->
                          <span class="btn btn-lg btn-icon btn-soft-danger rounded-circle mr-3">
                            <span class="btn-icon__inner">AO</span>
                            <span class="badge badge-xs badge-outline-danger badge-pos badge-pos--bottom-left rounded-circle"></span>
                          </span>
                          <!-- End Avatar -->

                          <div class="mr-3">
                            <!-- User Info -->
                            <div class="mb-2">
                              <h2 class="h6 mb-0">
                                <a href="#">Amanta Owens</a>
                              </h2>
                              <a class="small" href="#">@uidesginer</a>
                            </div>
                            <!-- End User Info -->

                            <!-- Social Networks -->
                            <ul class="list-inline mb-0">
                              <li class="list-inline-item mr-0">
                                <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                                  <span class="fab fa-facebook-f btn-icon__inner"></span>
                                </a>
                              </li>
                              <li class="list-inline-item mr-0">
                                <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                                  <span class="fab fa-google btn-icon__inner"></span>
                                </a>
                              </li>
                              <li class="list-inline-item mr-0">
                                <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                                  <span class="fab fa-twitter btn-icon__inner"></span>
                                </a>
                              </li>
                              <li class="list-inline-item mr-0">
                                <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                                  <span class="fab fa-github btn-icon__inner"></span>
                                </a>
                              </li>
                            </ul>
                            <!-- End Social Networks -->
                          </div>
                        </div>
                      </div>

                      <div class="col-sm-5 align-self-sm-end">
                        <!-- Button -->
                        <div class="text-sm-right">
                          <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
                            <span class="far fa-envelope mr-2"></span>
                            Send a Message
                          </a>
                        </div>
                        <!-- End Button -->
                      </div>
                    </div>

                    <!-- Add to Favorites -->
                    <a class="btn btn-sm btn-icon btn-soft-warning btn-bg-transparent position-absolute top-0 right-0 rounded-circle mt-3 mr-3" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Add to favorites">
                      <span class="far fa-star btn-icon__inner"></span>
                    </a>
                  </div>
                  <!-- End Add to Favorites -->
                </div>
                <!-- End Team -->
              
            

Info #13

Image Description

I'm a Seller

Discover how much property sold for with our comprehensive house price data.

Sell my Home
Image Description

I'm a Buyer

Ensure you find the right home, near the right school with new School Checker tool.

Buy a Home
              
                <!-- Icon Blocks Section -->
                <div class="bg-light">
                  <div class="container space-2">
                    <div class="w-lg-85 mx-lg-auto">
                      <div class="card-deck d-block d-md-flex card-md-gutters-3">
                        <!-- Card -->
                        <article class="card text-center">
                          <div class="card-body p-7">
                            <!-- SVG Icon -->
                            <div id="SVGforSale" class="svg-preloader w-75 mx-auto mb-6">
                              <figure class="ie-for-sale">
                                <img class="js-svg-injector" src="../../assets/svg/flat-icons/for-sale.svg" alt="Image Description"
                                     data-parent="#SVGforSale">
                              </figure>
                            </div>
                            <!-- End SVG Icon -->

                            <h3 class="h4 mb-3">I'm a Seller</h3>
                            <p class="mb-4">Discover how much property sold for with our comprehensive house price data.</p>
                            <a class="btn btn-sm btn-soft-danger transition-3d-hover" href="#">
                              Sell my Home
                              <span class="fas fa-angle-right ml-2"></span>
                            </a>
                          </div>
                        </article>
                        <!-- End Card -->

                        <!-- Card -->
                        <article class="card text-center">
                          <div class="card-body p-7">
                            <!-- SVG Icon -->
                            <div id="SVGbuyer" class="svg-preloader w-75 mx-auto mb-6">
                              <figure class="ie-buyer">
                                <img class="js-svg-injector" src="../../assets/svg/flat-icons/buyer.svg" alt="Image Description"
                                     data-parent="#SVGbuyer">
                              </figure>
                            </div>
                            <!-- End SVG Icon -->

                            <h3 class="h4 mb-3">I'm a Buyer</h3>
                            <p class="mb-4">Ensure you find the right home, near the right school with new School Checker tool.</p>
                            <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
                              Buy a Home
                              <span class="fas fa-angle-right ml-2"></span>
                            </a>
                          </div>
                        </article>
                        <!-- End Card -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Icon Blocks Section -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.svg-injector.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(window).on('load', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });
                </script>
              
            

Info #14

SVG

Front made simple

Easily draft, change, customize and launch new course pages with an easy-to-use template.

Learn More
SVG

Front in action

You can work with your existing website or create new pages on Front.

Get Started
Image Description
Image Description
              
                <!-- Services Section -->
                <div id="servicesSection" class="container space-2">
                  <div class="card-deck card-sm-gutters-3 d-block d-md-flex">
                    <!-- Card -->
                    <div class="card text-center mb-4 mb-md-0">
                      <div class="card-body space-3 px-5">
                        <div class="mb-4">
                          <figure id="icon24" class="svg-preloader ie-height-72 w-100 max-width-10 mx-auto mb-3">
                            <img class="js-svg-injector" src="../../assets/svg/icons/icon-24.svg" alt="SVG"
                                 data-parent="#icon24">
                          </figure>
                          <h3 class="h4">Front made simple</h3>
                          <p>Easily draft, change, customize and launch new course pages with an easy-to-use template.</p>
                        </div>
                        <a class="btn btn-primary btn-wide transition-3d-hover" href="../../documentation/index.html">Learn More</a>
                      </div>
                    </div>
                    <!-- End Card -->

                    <!-- Card -->
                    <div id="SVGcardSection" class="svg-preloader card z-index-2 text-center">
                      <div class="card-body space-3 px-5">
                        <div class="mb-4">
                          <figure id="icon23" class="svg-preloader ie-height-72 w-100 max-width-10 mx-auto mb-3">
                            <img class="js-svg-injector" src="../../assets/svg/icons/icon-23.svg" alt="SVG"
                                 data-parent="#icon23">
                          </figure>
                          <h3 class="h4">Front in action</h3>
                          <p>You can work with your existing website or create new pages on Front.</p>
                        </div>
                        <a class="btn btn-primary btn-wide transition-3d-hover" href="../../starter/index.html">Get Started</a>
                      </div>

                      <!-- SVG Component -->
                      <div class="position-absolute top-0 left-0 w-100 max-width-15 z-index-n1">
                        <figure class="ie-abstract-shapes-9">
                          <img class="js-svg-injector" src="../../assets/svg/components/abstract-shapes-9.svg" alt="Image Description"
                               data-parent="#SVGcardSection">
                        </figure>
                      </div>
                      <!-- End SVG Component -->

                      <!-- SVG Component -->
                      <div class="position-absolute bottom-0 right-0 w-100 max-width-15 z-index-n1">
                        <figure class="ie-abstract-shapes-6">
                          <img class="js-svg-injector" src="../../assets/svg/components/abstract-shapes-6.svg" alt="Image Description"
                               data-parent="#SVGcardSection">
                        </figure>
                      </div>
                      <!-- End SVG Component -->
                    </div>
                    <!-- End Card -->
                  </div>
                </div>
                <!-- End Services Section -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.svg-injector.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(window).on('load', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });
                </script>
              
            

Info #15

SVG

Responsive

Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.

Explore now
SVG

Customizable

Front template can be easily customized with its cutting-edge components and features.

Explore now
SVG

Premium sketch

Front is not only for developers but also for designers, and includes a Sketch file.

Explore now
SVG

Documentation

Every component and plugin is well documented with live examples.

Explore now
              
                <!-- Info -->
                <div class="container space-2">
                  <div id="SVGkeyFeatures" class="svg-preloader card-deck card-lg-gutters-2 d-block d-lg-flex">
                    <div class="card shadow mb-3 mb-lg-0">
                      <!-- Icon Blocks -->
                      <div class="card-body p-5">
                        <figure class="ie-height-56 w-100 max-width-8 mb-4">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-9.svg" alt="SVG"
                               data-parent="#SVGkeyFeatures">
                        </figure>
                        <h3 class="h5">Responsive</h3>
                        <p class="font-size-1">Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.</p>
                        <a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
                      </div>
                      <!-- End Icon Blocks -->
                    </div>

                    <div class="card shadow mb-3 mb-lg-0">
                      <!-- Icon Blocks -->
                      <div class="card-body p-5">
                        <figure class="ie-height-56 w-100 max-width-8 mb-4">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-3.svg" alt="SVG"
                               data-parent="#SVGkeyFeatures">
                        </figure>
                        <h3 class="h5">Customizable</h3>
                        <p class="font-size-1">Front template can be easily customized with its cutting-edge components and features.</p>
                        <a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
                      </div>
                      <!-- End Icon Blocks -->
                    </div>

                    <div class="card bg-primary text-white shadow-primary-lg mb-3 mb-lg-0">
                      <!-- Icon Blocks -->
                      <div class="card-body p-5">
                        <figure class="ie-height-56 w-100 max-width-8 mb-4">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-white-5.svg" alt="SVG"
                               data-parent="#SVGkeyFeatures">
                        </figure>
                        <h3 class="h5">Premium <span class="badge badge-success font-weight-medium badge-pill ml-1">sketch</span></h3>
                        <p class="text-white font-size-1">Front is not only for developers but also for designers, and includes a Sketch file.</p>
                        <a class="text-white font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
                      </div>
                      <!-- End Icon Blocks -->
                    </div>

                    <div class="card shadow">
                      <!-- Icon Blocks -->
                      <div class="card-body p-5">
                        <figure class="ie-height-56 w-100 max-width-8 mb-4">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-2.svg" alt="SVG"
                               data-parent="#SVGkeyFeatures">
                        </figure>
                        <h3 class="h5">Documentation</h3>
                        <p class="font-size-1">Every component and plugin is well documented with live examples.</p>
                        <a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
                      </div>
                      <!-- End Icon Blocks -->
                    </div>
                  </div>
                </div>
                <!-- End Info -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.svg-injector.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(window).on('load', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });
                </script>
              
            

Info #16

              
                <div class="card-deck d-block d-lg-flex card-lg-gutters-2">
                  <a class="card card-frame mb-3 mb-lg-0" href="../pages/help-article.html">
                    <div class="card-body p-4">
                      <!-- Icon Block -->
                      <div class="media">
                        <figure id="icon1" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-1.svg" alt="SVG"
                               data-parent="#icon1">
                        </figure>
                        <div class="media-body">
                          <h2 class="h5">Getting started</h2>
                          <p class="font-size-1">Welcome to Front! We're so glad you're here. Let's get started!</p>

                          <div class="media">
                            <!-- Contributors List -->
                            <ul class="list-inline mr-2 mb-0">
                              <li class="list-inline-item mr-0">
                                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                                  <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
                                </div>
                              </li>
                              <li class="list-inline-item ml-n3 mr-0">
                                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                                  <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
                                </div>
                              </li>
                            </ul>
                            <!-- End Contributors List -->

                            <div class="media-body">
                              <!-- Article Authors -->
                              <small class="d-block text-dark">1 article in this collection</small>
                              <small class="d-block text-dark">
                                <span class="text-muted">Written by</span>
                                Luisa Woodfine
                                <span class="text-muted">and</span>
                                Neil Galavan
                              </small>
                              <!-- End Article Authors -->
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Icon Block -->
                    </div>
                  </a>

                  <a class="card card-frame" href="../pages/help-article.html">
                    <div class="card-body p-4">
                      <!-- Icon Block -->
                      <div class="media">
                        <figure id="icon46" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-46.svg" alt="SVG"
                               data-parent="#icon46">
                        </figure>
                        <div class="media-body">
                          <h3 class="h5">Account</h3>
                          <p class="font-size-1">Adjust your profile and preferences to make Front work just for you!</p>

                          <div class="media">
                            <!-- Contributors List -->
                            <ul class="list-inline mr-2 mb-0">
                              <li class="list-inline-item mr-0">
                                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                                  <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
                                </div>
                              </li>
                              <li class="list-inline-item ml-n3 mr-0">
                                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                                  <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
                                </div>
                              </li>
                            </ul>
                            <!-- End Contributors List -->

                            <div class="media-body">
                              <!-- Article Authors -->
                              <small class="d-block text-dark">2 article in this collection</small>
                              <small class="d-block text-dark">
                                <span class="text-muted">Written by</span>
                                Fiona Burke, Luisa Woodfine
                                <span class="text-muted">and</span>
                                Neil Galavan
                              </small>
                              <!-- End Article Authors -->
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Icon Block -->
                    </div>
                  </a>
                </div>
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.svg-injector.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(window).on('load', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });
                </script>