[heading size="h2" style="uk-module-title"]Cards[/heading]

Use the [card] shortcode to create staff profiles e.g for company staff. The [card] shortcode gives you the option to add the person's name, the title and the person's avatar.

[line_break/] [grid] [column responsive small="1-1" medium="1-2" large="1-4"] [card title="Diane Moreno" subtitle="CEO" image="images/demo/avatar/team-1.jpg"] [card_social_icons style=""] [icon_button icon="facebook" url="#" target="_self"][/icon_button] [icon_button icon="linkedin" url="#" target="_self"][/icon_button] [icon_button icon="twitter" url="#" target="_self"][/icon_button] [icon_button icon="instagram" url="#" target="_self"][/icon_button] [/card_social_icons] [/card] [/column] [column responsive small="1-1" medium="1-2" large="1-4"] [card title="Israel Carter" subtitle="CTO" image="images/demo/avatar/team-2.jpg"] [card_social_icons style=""] [icon_button icon="facebook" url="#" target="_self"][/icon_button] [icon_button icon="linkedin" url="#" target="_self"][/icon_button] [icon_button icon="twitter" url="#" target="_self"][/icon_button] [icon_button icon="instagram" url="#" target="_self"][/icon_button] [/card_social_icons] [/card] [/column] [column responsive small="1-1" medium="1-2" large="1-4"] [card title="Sharon Berry" subtitle="CFO" image="images/demo/avatar/team-3.jpg"] [card_social_icons style=""] [icon_button icon="facebook" url="#" target="_self"][/icon_button] [icon_button icon="linkedin" url="#" target="_self"][/icon_button] [icon_button icon="twitter" url="#" target="_self"][/icon_button] [icon_button icon="instagram" url="#" target="_self"][/icon_button] [/card_social_icons] [/card] [/column] [column responsive small="1-1" medium="1-2" large="1-4"] [card title="Kerry Clayton" subtitle="Head Finance" image="images/demo/avatar/team-4.jpg"] [card_social_icons style=""] [icon_button icon="facebook" url="#" target="_self"][/icon_button] [icon_button icon="linkedin" url="#" target="_self"][/icon_button] [icon_button icon="twitter" url="#" target="_self"][/icon_button] [icon_button icon="instagram" url="#" target="_self"][/icon_button] [/card_social_icons] [/card] [/column] [/grid] [line_break/] [badge style="note"]markup[/badge] [code] [card title="Diane Moreno" subtitle="CEO" image="images/demo/avatar/team-4.jpg" link=""] [card_social_icons style=""] [icon_button icon="facebook" url="#" target="_self"][/icon_button] [icon_button icon="linkedin" url="#" target="_self"][/icon_button] [/card_social_icons] [/card][/code][line_break/]

You can set the tm-icons-visible class to the [person_social_icons] style attribute to have the social icons always visible.

[line_break/] [badge style="note"]markup[/badge] [code] [card title="Diane Moreno" subtitle="CEO" image="images/demo/avatar/team-4.jpg"] [card_social_icons style="tm-icons-visible"] ... [/card_social_icons] [/card][/code][line_break/] [heading size="h2" style="uk-module-title uk-margin-large-top"]Cards with links[/heading]

Use the [card_link] shortcode to create a card with a link. The link can be an internal/external page or a modal box.

[line_break/] [badge style="note"]markup[/badge] [code] [card_link title="Diane Moreno" subtitle="CEO" image="images/demo/avatar/team-4.jpg" link=""] ... [/card_link][/code]

The following examples uses a modal box to show more information of the person. To use a modal box, link link parameter to the unique id of the [card_link_modal] shortcode.

[line_break/] [grid] [column responsive small="1-1" medium="1-2" large="1-4"] [card_link title="Diane Moreno" subtitle="CEO" image="images/demo/avatar/team-1.jpg" link="#tm1"] [card_social_icons style=""] [icon_button icon="facebook" url="https://web.facebook.com/arrowthemes" target="_blank"][/icon_button] [icon_button icon="twitter" url="https://twitter.com/arrowthemes" target="_blank"][/icon_button] [icon_button icon="behance" url="https://www.behance.net/joelmb" target="_blank"][/icon_button] [/card_social_icons] [/card_link] [/column] [column responsive small="1-1" medium="1-2" large="1-4"] [card_link title="Israel Carter" subtitle="CTO" image="images/demo/avatar/team-2.jpg" link="#tm1"] [card_social_icons style=""] [icon_button icon="facebook" url="https://web.facebook.com/arrowthemes" target="_blank"][/icon_button] [icon_button icon="twitter" url="https://twitter.com/arrowthemes" target="_blank"][/icon_button] [icon_button icon="behance" url="https://www.behance.net/joelmb" target="_blank"][/icon_button] [/card_social_icons] [/card_link] [/column] [column responsive small="1-1" medium="1-2" large="1-4"] [card_link title="Sharon Berry" subtitle="CFO" image="images/demo/avatar/team-3.jpg" link="#tm1"] [card_social_icons style=""] [icon_button icon="facebook" url="https://web.facebook.com/arrowthemes" target="_blank"][/icon_button] [icon_button icon="twitter" url="https://twitter.com/arrowthemes" target="_blank"][/icon_button] [icon_button icon="behance" url="https://www.behance.net/joelmb" target="_blank"][/icon_button] [/card_social_icons] [/card_link] [/column] [column responsive small="1-1" medium="1-2" large="1-4"] [card_link title="Kerry Clayton" subtitle="Head Finance" image="images/demo/avatar/team-4.jpg" link="#tm1"] [card_social_icons style=""] [icon_button icon="facebook" url="https://web.facebook.com/arrowthemes" target="_blank"][/icon_button] [icon_button icon="twitter" url="https://twitter.com/arrowthemes" target="_blank"][/icon_button] [icon_button icon="behance" url="https://www.behance.net/joelmb" target="_blank"][/icon_button] [/card_social_icons] [/card_link] [/column] [/grid] [card_link_modal id="tm1" img="images/demo/avatar/team-1-big.jpg" title="Diane Moreno" subtitle="Chief Executive Officer"]

Diane Moreno is an British Board Certified (BBE) and London Board Certified Periodontist (LBCP) who joined Recover 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.

[button style="primary" href="#" target="_self"]Read More[/button] [/card_link_modal] [line_break/] [toggle_code open="false" title="Show code"] [grid] [column responsive small="1-1" medium="1-2" large="1-4"] [card_link title="Diane Moreno" subtitle="CEO" image="images/demo/avatar/team-1.jpg" link="#tm1"] [card_social_icons style=""] [icon_button icon="facebook" url="https://web.facebook.com/arrowthemes" target="_blank"][/icon_button] [icon_button icon="twitter" url="https://twitter.com/arrowthemes" target="_blank"][/icon_button] [icon_button icon="behance" url="https://www.behance.net/joelmb" target="_blank"][/icon_button] [/card_social_icons] [/card_link] [/column] [column responsive small="1-1" medium="1-2" large="1-4"] [card_link title="Israel Carter" subtitle="CTO" image="images/demo/avatar/team-2.jpg" link="#tm1"] [card_social_icons style=""] [icon_button icon="facebook" url="https://web.facebook.com/arrowthemes" target="_blank"][/icon_button] [icon_button icon="twitter" url="https://twitter.com/arrowthemes" target="_blank"][/icon_button] [icon_button icon="behance" url="https://www.behance.net/joelmb" target="_blank"][/icon_button] [/card_social_icons] [/card_link] [/column] [column responsive small="1-1" medium="1-2" large="1-4"] [card_link title="Sharon Berry" subtitle="CFO" image="images/demo/avatar/team-3.jpg" link="#tm1"] [card_social_icons style=""] [icon_button icon="facebook" url="https://web.facebook.com/arrowthemes" target="_blank"][/icon_button] [icon_button icon="twitter" url="https://twitter.com/arrowthemes" target="_blank"][/icon_button] [icon_button icon="behance" url="https://www.behance.net/joelmb" target="_blank"][/icon_button] [/card_social_icons] [/card_link] [/column] [column responsive small="1-1" medium="1-2" large="1-4"] [card_link title="Kerry Clayton" subtitle="Head Finance" image="images/demo/avatar/team-4.jpg" link="#tm1"] [card_social_icons style=""] [icon_button icon="facebook" url="https://web.facebook.com/arrowthemes" target="_blank"][/icon_button] [icon_button icon="twitter" url="https://twitter.com/arrowthemes" target="_blank"][/icon_button] [icon_button icon="behance" url="https://www.behance.net/joelmb" target="_blank"][/icon_button] [/card_social_icons] [/card_link] [/column] [/grid] [card_link_modal id="tm1" img="images/demo/avatar/team-1-big.jpg" title="Diane Moreno" subtitle="Chief Executive Officer"]

Diane Moreno is an British Board Certified (BBE) and London Board Certified Periodontist (LBCP) who joined Recover 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.

[button style="primary" href="#" target="_self"]Read More[/button] [/card_link_modal][/toggle_code]