Card | Soft UI Dashboard React @ Creative Tim

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

Belong Interactive

+$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 SuiTypography from "components/SuiTypography";

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

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

email: [email protected]

location: USA

social:

Props Information

Name	Type	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";

Create & validate your referral link and get

$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.