Elements - Sandal

English

- 8:00 am to 10:00 pm

### Talk to us now

+49 555 000 000

### Visit our offices

Mirage Plaza - Hamburg

### Send us an email

hello@sandal.com

### We are open all day

8:00 am to 10:00 pm daily

# Elements

## 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.

### Diane Moreno

#### CEO

### Israel Carter

#### CTO

### Sharon Berry

#### CFO

### Kerry Clayton

#### Head Finance

### Diane Moreno

#### Chief Executive Officer

Diane Moreno is an British Board Certified (BBE) and London Board Certified Periodontist (LBCP) who joined Sandal from The Endomics Dental Team.

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.

Read More

### 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>`

Sandal LLC.
Hamburg, Germany
One Street | Two Drive,
10th Floor, Site Wing
+49 555 000 000
hello@sandal.com
support@sandal.com

### Recent Posts

- Have faith in your abilities
  Believe in yourself! Have faith in your abilities! Without a...
- Live in the only moment
  Always continue the climb. It is possible for you to...

### Our Work

- Gaucho Cafe
- Fontaine Corp
- Saffron Magazine
- Celsius gallery
- Fidelity business
- Lighthouse Church
- Sauna Spa

### Our Values

Do not dwell in the past, do not dream of the future, concentrate the mind on now.

Let reality be reality. Let things flow naturally. Do not dwell in the past, do not dream of the future.

Copyright © Sandal Template by arrowthemes