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.
Diane Moreno
CEO
Israel Carter
CTO
Sharon Berry
CFO
Kerry Clayton
Head Finance
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/team-1.jpg" alt="Diane Moreno - CEO" > <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">Diane Moreno</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/team-1.jpg" alt="Diane Moreno - CEO" > <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">Diane Moreno</h3> <h4 class="tm-card-title">Chef</h4> </div> </div> </div>
Cards with links
Use the tm-card-link class to create a card with a link. The link can be an internal/external page or a modal box.
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/team-1.jpg" alt="Diane Moreno - CEO" > <div class="tm-social-icons tm-icons-visible"> ... </div> </div> <a class="tm-card-link" href="#"></a> <div class="tm-card-content"> <h3 class="uk-panel-title">Diane Moreno</h3> <h4 class="tm-card-title">Chef</h4> </div> </div> </div>
The following examples uses a modal box to show more information of the person. To use a modal box, link tm-card-link link to the unique id of a modal box.
Show code
<div class="uk-grid" data-uk-grid-margin>
<!-- block -->
<div class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-4">
<div class="uk-panel uk-panel-box tm-panel-card">
<div class="uk-panel-teaser"> <img class="tm-card-avatar" src="images/demo/avatar/team-1.jpg" alt="Diane Moreno - CEO">
<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>
<a href="#" class="uk-icon-button uk-icon-twitter" target="_self"></a>
<a href="#" class="uk-icon-button uk-icon-instagram" target="_self"></a>
</div>
</div>
<a class="tm-card-link" href="#tm1" data-uk-modal="{center:true}"></a>
<div class="tm-card-content">
<h3 class="uk-panel-title">Diane Moreno</h3>
<h4 class="tm-card-title">CEO</h4>
</div>
</div>
</div>
<!-- block -->
<div class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-4">
<div class="uk-panel uk-panel-box tm-panel-card">
<div class="uk-panel-teaser"> <img class="tm-card-avatar" src="images/demo/avatar/team-2.jpg" alt="Israel Carter - CTO">
<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>
<a href="#" class="uk-icon-button uk-icon-twitter" target="_self"></a>
<a href="#" class="uk-icon-button uk-icon-instagram" target="_self"></a>
</div>
</div>
<a class="tm-card-link" href="#tm1" data-uk-modal="{center:true}"></a>
<div class="tm-card-content">
<h3 class="uk-panel-title">Israel Carter</h3>
<h4 class="tm-card-title">CTO</h4> </div>
</div>
</div>
<!-- block -->
<div class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-4">
<div class="uk-panel uk-panel-box tm-panel-card">
<div class="uk-panel-teaser"> <img class="tm-card-avatar" src="images/demo/avatar/team-3.jpg" alt="Sharon Berry - CFO">
<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>
<a href="#" class="uk-icon-button uk-icon-twitter" target="_self"></a>
<a href="#" class="uk-icon-button uk-icon-instagram" target="_self"></a>
</div>
</div>
<a class="tm-card-link" href="#tm1" data-uk-modal="{center:true}"></a>
<div class="tm-card-content">
<h3 class="uk-panel-title">Sharon Berry</h3>
<h4 class="tm-card-title">CFO</h4>
</div>
</div>
</div>
<!-- block -->
<div class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-4">
<div class="uk-panel uk-panel-box tm-panel-card">
<div class="uk-panel-teaser"> <img class="tm-card-avatar" src="images/demo/avatar/team-4.jpg" alt="Kerry Clayton - Head Finance">
<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>
<a href="#" class="uk-icon-button uk-icon-twitter" target="_self"></a>
<a href="#" class="uk-icon-button uk-icon-instagram" target="_self"></a>
</div>
</div>
<a class="tm-card-link" href="#tm1" data-uk-modal="{center:true}"></a>
<div class="tm-card-content">
<h3 class="uk-panel-title">Kerry Clayton</h3>
<h4 class="tm-card-title">Head Finance</h4> </div>
</div>
</div>
</div>
<!-- modal box -->
<div aria-hidden="true" class="uk-modal" id="tm1">
<div class="uk-modal-dialog uk-modal-dialog-large uk-modal-dialog-lightbox tm-modal-dialog">
<a class="uk-modal-close uk-close uk-close-alt" href=""></a>
<div class="uk-grid uk-grid-collapse" data-uk-grid-margin="">
<div class="uk-width-medium-1-2">
<div class="tm-modal-image"><img alt="Diane Moreno" class="uk-width-1-1" height="478" src="images/demo/avatar/team-1-big.jpg" width="420"></div>
</div>
<div class="uk-width-medium-1-2">
<div class="uk-panel uk-panel-space">
<h3 class="uk-module-title">Diane Moreno</h3>
<h4 class="uk-margin-remove">Chief Executive Officer</h4><br>
<p>Diane Moreno is an British Board Certified (BBE) and London Board Certified Periodontist (LBCP) who joined Sandal from The Endomics Dental Team.</p>
<p>She received her Doctorate in Medical Dentistry from the Boston University School of Dental. She later completed an extensive training in Conscious Sedation from Cambridge.</p><a class="uk-button-primary uk-button" href="#" target="_self">Read More</a>
</div>
</div>
</div>
</div>
</div>
