Team Cards

The Team Cards components helps you to simply create beautiful cards for displaying your team members details.

Horizontal Team Card

Emma Roberts

UI Designer

Artist is a term applied to a person who engages in an activity deemed to be an art.

<script setup>
// Vue Material Kit 2 component
import HorizontalTeamCard from "@/examples/cards/teamCards/HorizontalTeamCard.vue";
</script>
<template>
 <HorizontalTeamCard
  image="https://bit.ly/3HCDiqM"
  :profile="{ name: 'Emma Roberts', link: 'javascript:;' }"
  :position="{ label: 'UI Designer', color: 'info' }"
  description="Artist is a term applied to a person who engages in an activity deemed to be an art."
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import HorizontalTeamCard from "@/examples/cards/teamCards/HorizontalTeamCard.vue";
4</script>
5<template>
6 <HorizontalTeamCard
7  image="https://bit.ly/3HCDiqM"
8  :profile="{ name: 'Emma Roberts', link: 'javascript:;' }"
9  :position="{ label: 'UI Designer', color: 'info' }"
10  description="Artist is a term applied to a person who engages in an activity deemed to be an art."
11 />
12</template>

Props Information

Name	Type	Description
image*	string	Used to set the `HorizontalTeamCard` image. Its a required prop.
profile*	namelink	Used to set the `HorizontalTeamCard` profile details such as name, and profile link.
position*	labelcolor	Used to set the `HorizontalTeamCard` job title and its color. Its a required prop.
description*	string	Used to set the `HorizontalTeamCard` description. Its a required prop.

Transparent Team Card

Pro

Emma Roberts

CEO / Co-Founder

And I love you like Kanye loves Kanye. We need to restart the human foundation.

<script setup>
// Vue Material Kit 2 component
import TransparentTeamCard from "@/examples/cards/teamCards/TransparentTeamCard.vue";
</script>
<template>
 <TransparentTeamCard
   image="https://bit.ly/3HCDiqM"
   name="Emma Roberts"
   position="CEO / Co-Founder"
   description="And I love you like Kanye loves Kanye. We need to restart the human foundation."
   :socials="[
     { component: 'twitter', route: 'javascript:;' },
     { component: 'dribbble', route: 'javascript:;' },
     { component: 'linkedin', route: 'javascript:;' },
   ]"
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import TransparentTeamCard from "@/examples/cards/teamCards/TransparentTeamCard.vue";
4</script>
5<template>
6 <TransparentTeamCard
7   image="https://bit.ly/3HCDiqM"
8   name="Emma Roberts"
9   position="CEO / Co-Founder"
10   description="And I love you like Kanye loves Kanye. We need to restart the human foundation."
11   :socials="[
12     { component: 'twitter', route: 'javascript:;' },
13     { component: 'dribbble', route: 'javascript:;' },
14     { component: 'linkedin', route: 'javascript:;' },
15   ]"
16 />
17</template>

Props Information

Name	Type	Description
image*	string	Used to set the `HorizontalTeamCard` image. Its a required prop.
name*	string	Used to set the `TransparentTeamCard` name. Its a required prop.
position*	string	Used to set the `TransparentTeamCard` position title. Its a required prop.
description*	string	Used to set the `TransparentTeamCard` description. Its a required prop.
socials	componentroute	Used to set the `TransparentTeamCard` social media icon and route.