Create Person Boxes in two awesome variations:
- ct-personBox–thumb
- ct-personBox–left
Just use simple HTML markup with one available variations:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div class="ct-personBox ct-personBox--thumb ct-personBox--primary"> <div class="ct-personBox-image"> <a href="#"><img src="assets/images/demo-content/person1.jpg" alt="Person"></a> </div> <a href="#" class="ct-personBox-name"> Latoya Kevins </a> <div class="ct-personBox-description text-center"> <h5 class="ct-u-sectionHeader ct-u-sectionHeader--primary text-uppercase"> Top Chef </h5> <p> Chef Latoya Kevins received train at Baltimore’s Culinary Institute and began her professional career as the Top Chef at Macaroon. </p> <div class="ct-u-moustache"></div> </div> <ul class="ct-socials ct-socials--primary list-inline list-unstyled"> <li> <a href="https://www.facebook.com/createITpl" data-toggle="tooltip" data-placement="top" title="" data-original-title="Facebook"><i class="fa fa-fw fa-facebook-square"></i></a> </li> <li> <a href="https://twitter.com/createitpl" data-toggle="tooltip" data-placement="top" title="" data-original-title="Twitter"><i class="fa fa-fw fa-twitter"></i></a> </li> <li> <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Pinterest"><i class="fa fa-fw fa-pinterest"></i></a> </li> <li> <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="LinkedIn"><i class="fa fa-fw fa-linkedin"></i></a> </li> </ul> </div> |
You can also modify Person Boxes colors with the following CSS classes:
- ct-personBox–primary
- ct-personBox–blue
- ct-personBox–green
- ct-personBox–purple
- ct-personBox–blue
- ct-personBox–gray
- ct-personBox–gold