{Theme} have 2 types of Person box
Person box – type1
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="ct-personBox ct-personBox--type1"> <figure class="ct-personBox-image"> <img src="../assets/images/demo-content/person-1.jpg" alt="Image"/> <ul class="list-unstyled list-inline ct-socials ct-socials--type2"> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-dribbble"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> </ul> </figure> <h5 class="ct-personBox-name">Aleksandra Weis</h5> <p class="ct-personBox-job">Hotel guest</p> <p class="ct-personBox-description">Seded ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</p> </div> |
Screenshot
Person box 1
Person box – type2
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="ct-personBox ct-personBox--type2"> <header class="ct-personBox-header"> <h5 class="ct-personBox-name">Lisa Donalds</h5> <p class="ct-personBox-job">Hotel manager</p> </header> <figure class="ct-personBox-image"> <img src="../assets/images/demo-content/person-1.jpg" alt="Image"/> <ul class="list-unstyled list-inline ct-socials ct-socials--type2"> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-dribbble"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> </ul> </figure> <p class="ct-personBox-description">Seded ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</p> </div> |
Screenshot
Person box 2