Creative Tim  |  Docs

Info Cards - Argon

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

// Argon Dashboard 2 MUI Examples import DefaultInfoCard from "examples/Cards/InfoCard/DefaultInfoCard";
salary
Belong 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
// Argon Dashboard 2 PRO MUI examples import MiniInfoCard from "examples/Cards/InfoCard/MiniInfoCard"; // Argon Dashboard 2 PRO MUI components import ArgonTypography from "components/ArgonTypography";
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

// Argon Dashboard 2 MUI 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

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.

Transparent Info Card

PRO
// Argon Dashboard 2 PRO MUI examples import TransparentInfoCard from "examples/Cards/InfoCard/TransparentInfoCard";
Create & validate your referral link and get
$100

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''dark'infoUsed to set the TransparentInfoCard color.
icon*nodeUsed to set the TransparentInfoCard icon. Its a required prop.
description*stringUsed to set the TransparentInfoCard description. Its a required prop.
valuestringnumbernode""Used to set the DefaultInfoCard value it will be visible at the bottom of the card.
Contents