People and Team

This is the main variation vc-card boxed class is the main class

<div class="vc-card boxed">

  <a href="#">
    <img src="../../assets/img/people/06.jpg" alt="people">
  </a>

  <div class="vc-card-wrapper">
    <a href="#" class="title">Dr. Tristram Jack</a>
    <div class="subtitle">Associate Dean</div>
  </div>

  <div class="links">
    <a href="#" data-toggle="tooltip" data-original-title="homepage"><i class="fa fa-home"></i></a>
    <a href="#" data-toggle="tooltip" data-original-title="Biography"><i class="fa fa-user"></i></a>
    <a href="#" data-toggle="tooltip" data-original-title="Facebook"><i class="fa fa-facebook"></i></a>
    <a href="#" data-toggle="tooltip" data-original-title="Twitter"><i class="fa fa-twitter"></i></a>
  </div>

</div>

Variation Alternatively, there is variation with only two links at the bottom.

<div class="vc-card boxed hoverable-links">

  <a href="#">
    <img src="../../assets/img/people/06.jpg" alt="people">
  </a>

  <div class="vc-card-wrapper">
    <a href="#" class="title">Dr. Tristram Jack</a>
    <div class="subtitle">Associate Dean</div>
  </div>

  <div class="links">
    <a href="#"><i class="oli oli-external_link"></i><span>homepage</span></a>
    <a href="#"><i class="oli oli-user_male_circle"></i><span>bio</span></a>
  </div>

</div>
  • add .hoverable-links to the element

Mini Variation

Just adds a .mini-card to the element

<div class="vc-card boxed hoverable-links mini-card">

  <a href="#" class="set-bg">
    <img src="../../assets/img/people/06.jpg" alt="people" class="set-me">
  </a>

  <div class="vc-card-wrapper"><a href="#" class="title">Dr. Quinlan Granville</a>
    <div class="subtitle">Associate Dean</div>
  </div>

  <div class="links">
    <a href="#"><i class="oli oli-facebook"></i><span>Facebook</span></a>
    <a href="#"><i class="oli oli-twitter"></i><span>Twitter</span></a>
  </div>

</div>

Icon box style

<div class="featured-person">
  <a href="#">
    <img src="../../assets/img/people/06.jpg">
  </a>
  <a href="#">
    <h3>Dr. John Doe</h3>
  </a>
  <p>Phasellus lectus sem</p>
</div>