Elements

If you can dream it, you can do it

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.


Erik Harmon - Chef

Erik Harmon

Chef

Anita Hughes - Pastry Chef

Anita Hughes

Pastry Chef

Jamie Smith - Sous Chef

Jamie Smith

Sous Chef

Ann Punjah - Pantry cook

Ann Punjah

Pantry cook


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>

demo