React Info Cards - Soft UI
The Info Cards components helps you to simply create beautiful info card for displaying information or data.
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 Info Card
// Soft UI Dashboard React examples
import DefaultInfoCard from "examples/Cards/InfoCard/DefaultInfoCard";
salary
+$2000
Props Information
Name | Type | Default | Description |
---|---|---|---|
color | 'primary''secondary''info''success''warning''error''dark' | info | Used to set the DefaultInfoCard color. |
icon* | node | Used to set the DefaultInfoCard icon. Its a required prop. | |
title* | string | Used to set the DefaultInfoCard title. Its a required prop. | |
description | string | "" | Used to set the DefaultInfoCard description. |
value | stringnumber | "" | Used to set the DefaultInfoCard value it will be visible at the bottom of the card. |
Mini Info Card
PRO
// Soft UI Dashboard PRO React examples
import MiniInfoCard from "examples/Cards/InfoCard/MiniInfoCard";
// Soft UI Dashboard PRO components
import SoftTypography from "components/SoftTypography";
754
754
m
New York City
Props Information
Name | Type | Default | Description |
---|---|---|---|
color | 'primary''secondary''info''success''warning''error''dark' | info | Used to set the MiniInfoCard color. |
icon* | node | Used to set the MiniInfoCard icon. Its a required prop. | |
title* | node | Used to set the MiniInfoCard title. Its a required prop. | |
description | string | "" | Used to set the MiniInfoCard description. |
Profile Info Card
// Soft UI Dashboard React examples
import ProfileInfoCard from "examples/Cards/InfoCard/ProfileInfoCard";
// @mui icons
import FacebookIcon from "@mui/icons-material/Facebook";
import TwitterIcon from "@mui/icons-material/Twitter";
import InstagramIcon from "@mui/icons-material/Instagram";
profile information
Props Information
Name | Type | Default | Description |
---|---|---|---|
title* | string | Used to set the ProfileInfoCard title. Its a required prop. | |
description* | string | Used to set the ProfileInfoCard description. Its a required prop. | |
info* | object | Used to set the ProfileInfoCard into and details, its should be an object that contains your info and the card will display it as a list, the keys of the object is visible as the title of each item. Its a required prop. | |
social* | array | Used to set the ProfileInfoCard into and social profiles icon with their links, its should be an array of objects with the following keys: `link`, `icon` and `color`. Its a required prop. | |
action* | { route: string, tooltip: string, } | Used to set the ProfileInfoCard route and helper tooltip content on top right corner of the card. Its a required prop. |
Transparent Info Card
PRO
// Soft UI Dashboard PRO React examples
import TransparentInfoCard from "examples/Cards/InfoCard/TransparentInfoCard";
$100
Props Information
Name | Type | Default | Description |
---|---|---|---|
color | 'primary''secondary''info''success''warning''error''dark' | info | Used to set the TransparentInfoCard color. |
icon* | node | Used to set the TransparentInfoCard icon. Its a required prop. | |
description* | string | Used to set the TransparentInfoCard description. Its a required prop. | |
value | stringnumbernode | "" | Used to set the DefaultInfoCard value it will be visible at the bottom of the card. |