VISION  |  Docs

Team Cards

PRO

The Team Cards components helps you to simply create a beautiful card for the team members profiles or for the entire team profile.

The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.

Team Profile Card

// Vision UI Dashboard PRO React examples import TeamProfileCard from "examples/Cards/TeamCards/TeamProfileCard";
digital marketing

A group of people who collectively are responsible for all of the work necessary to produce working, validated assets.

  • Industry:

    marketing team

  • Rating:

  • Members:

    Alexa Tompson
    Martin Doe
    Alexaner Smith
    Romina Hadid

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''dark'infoUsed to set the TeamProfileCard color.
title*stringUsed to set the TeamProfileCard title. Its a required prop.
description*stringUsed to set the TeamProfileCard description. Its a required prop.
industrystring""Used to set the TeamProfileCard label text.
ratingnumber0Used to set the TeamProfileCard rating stars.
membersarray[]Used to set the TeamProfileCard included members. It should be an array of objects with the following keys: `image` and `name`.
dropdownbool{ action: func, menu: node }falseUsed to set the TeamProfileCard dropdown menu, it should be an object with the following keys: `action` and `menu`.
  • The `action` should be a function used for opening the dropdown menu.
  • The `menu` should be a node (The dropdown menu content) which will be visible once the dropdown clicked by the user.
  • The dropdown button will be visible on the top right corner of the card.

The below code contains a complete exmaple of TeamProfileCard including the dropdown menu functionality.

Contents