Creative Tim  |  Docs

React Team Cards - Soft UI

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.

Default Team Card

// Soft UI Dashboard PRO React examples import DefaultTeamCard from "examples/Cards/TeamCards/DefaultTeamCard";
Natalie Paisley
Natalie Paisley
credit analyst

Props Information

NameTypeDefaultDescription
image*stringUsed to set the DefaultTeamCard profile image. Its a required prop.
name*stringUsed to set the DefaultTeamCard profile name. Its a required prop.
jobTitle*{ color: ["primary", "secondary", "info", "success", "warning", "error", "dark", "light"], label: string }Used to set the DefaultTeamCard job title. Its a required prop.
action*{ type: ["internal", "external"], route: string }Used to set the DefaultTeamCard route. Its a required prop.

Complex Team Card

// Soft UI Dashboard PRO React examples import ComplexTeamCard from "examples/Cards/TeamCards/ComplexTeamCard";
Bruce Mars

Bruce Mars

Atlanta U.S.

750
Projects

Props Information

NameTypeDefaultDescription
image*stringUsed to set the ComplexTeamCard profile image. Its a required prop.
name*stringUsed to set the ComplexTeamCard profile name. Its a required prop.
jobTitle*stringUsed to set the ComplexTeamCard job title. Its a required prop.
projects*{ color: ["primary", "secondary", "info", "success", "warning", "error", "dark", "light", "text"], count: ["string", "number"], label: string }Used to set the ComplexTeamCard projects details. Its a required prop.
action*{ type: ["internal", "external"], route: string }Used to set the ComplexTeamCard route. Its a required prop.

Team Profile Card

// Soft 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