Cards
Use the tm-panel-card
class to create staff profiles e.g for company staff. The card element gives you the option to add the person's name
, the title
and the person's avatar
. The card element is wrapped within uk-grid
to create columns.
markup
<div class="uk-panel uk-panel-box tm-panel-card"><div class="uk-panel-teaser"> <img class="tm-card-avatar" src="images/demo/avatar/client-1.jpg" alt="Erik Harmon - Chef" > <div class="tm-social-icons "> <a href="#" class="uk-icon-button uk-icon-facebook" target="_self"></a> <a href="#" class="uk-icon-button uk-icon-linkedin" target="_self"></a> </div> </div> <a class="tm-card-link" href="#"></a> <div class="tm-card-content"> <h3 class="uk-panel-title">Erik Harmon</h3> <h4 class="tm-card-title">Chef</h4> </div> </div> </div>
You can set the tm-icons-visible
class together with the tm-social-icons
class to have it visible always.
markup
<div class="uk-panel uk-panel-box tm-panel-card"><div class="uk-panel-teaser"> <img class="tm-card-avatar" src="images/demo/avatar/client-1.jpg" alt="Erik Harmon - Chef" > <div class="tm-social-icons tm-icons-visible"> <a href="#" class="uk-icon-button uk-icon-facebook" target="_self"></a> <a href="#" class="uk-icon-button uk-icon-linkedin" target="_self"></a> </div> </div> <a class="tm-card-link" href="#"></a> <div class="tm-card-content"> <h3 class="uk-panel-title">Erik Harmon</h3> <h4 class="tm-card-title">Chef</h4> </div> </div> </div>