Team Cards - Argon
PROThe 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
// Argon Dashboard 2 PRO MUI examples
import DefaultTeamCard from "examples/Cards/TeamCards/DefaultTeamCard";
Natalie Paisley
Props Information
Name | Type | Default | Description |
---|---|---|---|
image* | string | Used to set the DefaultTeamCard profile image. Its a required prop. | |
name* | string | Used 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
// Argon Dashboard 2 PRO MUI examples
import ComplexTeamCard from "examples/Cards/TeamCards/ComplexTeamCard";
Bruce Mars
Atlanta U.S.
750
Props Information
Name | Type | Default | Description |
---|---|---|---|
image* | string | Used to set the ComplexTeamCard profile image. Its a required prop. | |
name* | string | Used to set the ComplexTeamCard profile name. Its a required prop. | |
jobTitle* | string | Used 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
// Argon Dashboard 2 PRO MUI 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 teamRating:
Members:
Props Information
Name | Type | Default | Description |
---|---|---|---|
color | 'primary''secondary''info''success''warning''error''dark' | info | Used to set the TeamProfileCard color. |
title* | string | Used to set the TeamProfileCard title. Its a required prop. | |
description* | string | Used to set the TeamProfileCard description. Its a required prop. | |
industry | string | "" | Used to set the TeamProfileCard label text. |
rating | number | 0 | Used to set the TeamProfileCard rating stars. |
members | array | [] | Used to set the TeamProfileCard included members. It should be an array of objects with the following keys: `image` and `name`. |
dropdown | bool{ action: func, menu: node } | false | Used to set the TeamProfileCard dropdown menu, it should be an object with the following keys: `action` and `menu`.
|
The below code contains a complete exmaple of TeamProfileCard
including the dropdown menu functionality.