Profile Cards - Argon
PROThe Profile Cards components helps you to simply create a beautiful card for your 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.
Simple Profile Card
// Argon Dashboard 2 PRO MUI examples
import SimpleProfileCard from "examples/Cards/ProfileCards/SimpleProfileCard";
Andrew John
Loan Counselor
Don't walk behind me; I may not lead. Don't walk in front of me; I may not follow. Just walk beside me and be my friend.
Props Information
Name | Type | Default | Description |
---|---|---|---|
image* | string | Used to set the SimpleProfileCard profile image. Its a required prop. | |
name* | string | Used to set the SimpleProfileCard profile name. Its a required prop. | |
position* | { color: ["primary", "secondary", "info", "success", "warning", "error", "dark"], label: string } | Used to set the SimpleProfileCard job title with its style. Its a required prop. | |
description | string | "" | Used to set the SimpleProfileCard profile description. |
action | { type: ["internal", "external"], route: string } | { type: "internal", route: "#" } | Used to set the SimpleProfileCard route. |
Default Profile Card
// Argon Dashboard 2 PRO MUI examples
import DefaultProfileCard from "examples/Cards/ProfileCards/DefaultProfileCard";
// @mui icons
import FacebookIcon from "@mui/icons-material/Facebook";
import TwitterIcon from "@mui/icons-material/Twitter";
import InstagramIcon from "@mui/icons-material/Instagram";
Props Information
Name | Type | Default | Description |
---|---|---|---|
image* | string | Used to set the DefaultProfileCard profile image. Its a required prop. | |
name* | string | Used to set the DefaultProfileCard profile name. Its a required prop. | |
position* | string | Used to set the DefaultProfileCard job title. Its a required prop. | |
description | string | "" | Used to set the DefaultProfileCard profile description. |
social | array | [{}] | Used to set the DefaultProfileCard social media icons, it should be an array of objects with the following keys: `link`, `icon` and `color`. |
Complex Profile Card
// Argon Dashboard 2 PRO MUI examples
import ComplexProfileCard from "examples/Cards/ProfileCards/ComplexProfileCard";
// @mui icons
import FacebookIcon from "@mui/icons-material/Facebook";
import TwitterIcon from "@mui/icons-material/Twitter";
import InstagramIcon from "@mui/icons-material/Instagram";
Props Information
Name | Type | Default | Description |
---|---|---|---|
image* | string | Used to set the DefaultProfileCard profile image. Its a required prop. | |
name* | string | Used to set the DefaultProfileCard profile name. Its a required prop. | |
position* | string | Used to set the DefaultProfileCard job title. Its a required prop. | |
description | string | "" | Used to set the DefaultProfileCard profile description. |
social | array | [{}] | Used to set the DefaultProfileCard social media icons, it should be an array of objects with the following keys: `link`, `icon` and `color`. |