Elements
These modular elements can be readily used and customized across pages and in different blocks.
Default Team Style <> show code
<div class="card team-card">
<div class="card_img">
<img class="img-full" src="..." alt="Card image">
<div class="hover-overlay effect-transformY">
<a href="" class="overlay_icon"><i class="fa fa-facebook-f"></i></a>
<a href="" class="overlay_icon"><i class="fa fa-twitter"></i></a>
<a href="" class="overlay_icon"><i class="fa fa-linkedin"></i></a>
</div>
</div>
<div class="card-block text-center">
<a href="#"><h4 class="card-title">Julia Robertson</h4></a>
<span class="">Project Manager</span>
</div>
</div>
<!-- Circled team image style -->
<div class="card team-card ">
<div class="card_img text-center img-circle">
<img class="" src="..." alt="Card image">
<div class="hover-overlay effect-transformY">
<a href="" class="overlay_icon"><i class="fa fa-facebook-f"></i></a>
<a href="" class="overlay_icon"><i class="fa fa-twitter"></i></a>
<a href="" class="overlay_icon"><i class="fa fa-linkedin"></i></a>
</div>
</div>
<div class="card-block text-center">
<a href="#"><h4 class="card-title">Julia Robertson</h4></a>
<span class="">Project Manager</span>
</div>
</div>
How to use
- Copy the code from example to get the default style.
- For circle image radius use .img-circle with .card_img wrapper. Remove class .img-full from <img> element when image is circle styled
Example