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

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

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

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

Info #5

FR-52
Settings Repository Download Archive
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 -->
Copy
<!-- 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>
Copy

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

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

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

Info #9

FR-52
Settings Repository Download Archive
Image Description

Mapbox

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

Members

Budget
$9,145
Priority
Medium
FR-13
Settings Repository Download Archive
Image Description

Slack

Using our creative gifts drives this foundation.

Members

Budget
$3,120
Priority
Low
FR-36
Settings Repository Download Archive
Image Description

DropBox

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

Members

Budget
$15,000
Priority
Highest 
<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>
Copy

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

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

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

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 -->
Copy
<!-- 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>
Copy

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 -->
Copy
<!-- 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>
Copy

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 -->
Copy
<!-- 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>
Copy

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>
Copy
<!-- 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>
Copy