Info Cards
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
// Vision UI Dashboard React examples
import DefaultInfoCard from "examples/Cards/InfoCard/DefaultInfoCard";
salary
+$2000
+$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
// Vision UI Dashboard PRO React examples
import MiniInfoCard from "examples/Cards/InfoCard/MiniInfoCard";
// Vision UI Dashboard PRO components
import VuiTypography from "components/VuiTypography";
754
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
// Vision 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";
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. |