Person Box in {Theme} have one variation that is using the class you can see below.
- .ct-personBox–light
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="ct-personBox"> <div class="ct-personBox-image"><img src="assets/images/demo-content/personbox.jpg" alt="person"/></div> <div class="ct-personBox-description"> <div class="ct-personBox-meta"><span class="h5 ct-personBox-name">john warner</span><span class="ct-personBox-position">ceo & founder</span> <ul class="ct-socials list-inline list-unstyled"> <li class="ct-socials__itemfacebook"><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook"></i></a></li> <li class="ct-socials__itemtwitter"><a href="https://twitter.com/createitpl"><i class="fa fa-twitter"></i></a></li> <li class="ct-socials__iteminstagram"><a href="#"><i class="fa fa-instagram"></i></a></li> </ul> </div> <p>Nam a diam tincidunt, condimentum nisi et, fringilla lectus. Nullam nec lectus eu erat tempus pulvinar.</p><span class="progress-bar-label">Marketing<span>92%</span></span> <div class="progress"> <div role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width:92%" class="progress-bar"></div> </div><span class="progress-bar-label">PR<span>85%</span></span> <div class="progress"> <div role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width:85%" class="progress-bar"></div> </div><span class="progress-bar-label">Managing<span>98%</span></span> <div class="progress"> <div role="progressbar" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100" style="width:98%" class="progress-bar"></div> </div> </div> </div> |
Screenshot
Person Box