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";
salaryBelong Interactive
+$2000

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''dark'infoUsed to set the DefaultInfoCard color.
icon*nodeUsed to set the DefaultInfoCard icon. Its a required prop.
title*stringUsed to set the DefaultInfoCard title. Its a required prop.
descriptionstring""Used to set the DefaultInfoCard description.
valuestringnumber""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  m

New York City

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''dark'infoUsed to set the MiniInfoCard color.
icon*nodeUsed to set the MiniInfoCard icon. Its a required prop.
title*nodeUsed to set the MiniInfoCard title. Its a required prop.
descriptionstring""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";
profile information
Hi, I’m Alec Thompson, Decisions: If you can’t decide, the answer is no. If two equally difficult paths, choose the one more painful in the short term (pain avoidance is creating an illusion of equality).

full name:   Alec M. Thompson
mobile:   (44) 123 1234 123
location:   USA
social:  

Props Information

NameTypeDefaultDescription
title*stringUsed to set the ProfileInfoCard title. Its a required prop.
description*stringUsed to set the ProfileInfoCard description. Its a required prop.
info*objectUsed 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*arrayUsed 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.