Creative Tim  |  Docs

React Profile Cards - Soft UI

PRO

The 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

// Soft UI Dashboard PRO React examples import SimpleProfileCard from "examples/Cards/ProfileCards/SimpleProfileCard";
Andrew John

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

NameTypeDefaultDescription
image*stringUsed to set the SimpleProfileCard profile image. Its a required prop.
name*stringUsed 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.
descriptionstring""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

// Soft UI Dashboard PRO React 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";
Joshua Jackson
Joshua Jackson

landscape architect

Success is not final, failure is not fatal: it is the courage to continue that counts...

Props Information

NameTypeDefaultDescription
image*stringUsed to set the DefaultProfileCard profile image. Its a required prop.
name*stringUsed to set the DefaultProfileCard profile name. Its a required prop.
position*stringUsed to set the DefaultProfileCard job title. Its a required prop.
descriptionstring""Used to set the DefaultProfileCard profile description.
socialarray[{}]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

// Soft UI Dashboard PRO React 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";
Alec Thompson
Alec Thompson
CEO / Co-Founder

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

Props Information

NameTypeDefaultDescription
image*stringUsed to set the DefaultProfileCard profile image. Its a required prop.
name*stringUsed to set the DefaultProfileCard profile name. Its a required prop.
position*stringUsed to set the DefaultProfileCard job title. Its a required prop.
descriptionstring""Used to set the DefaultProfileCard profile description.
socialarray[{}]Used to set the DefaultProfileCard social media icons, it should be an array of objects with the following keys: `link`, `icon` and `color`.
Contents