Material-UI Core Cards

Our cards provide a flexible and extensible content container with multiple variants and options.


Examples

Each of the following components has its own JSS styles file inside src/assets/theme/components/cards/**/*. If you need to change their styles, please enter the components code, and you will see an import something like:

import componentStyles from "assets/theme/components/cards/**/*.js";

Please use this import to match the component and its style, and please use this import to see where you need to make your own changes.

CardStats FREE

Check out our CardStats used with icons from the @material-ui/icons package:

Sales
924

Some crazy stat text here

import React from "react";
// @material-ui/core components
import Box from "@material-ui/core/Box";
// @material-ui/icons components
import GroupAdd from "@material-ui/icons/GroupAdd";

// core components
import CardStats from "components/Cards/CardStats.js";

const Example = () => {
  return (
    <>
      <CardStats
        subtitle="Sales"
        title="924"
        icon={GroupAdd}
        color="bgWarningLight"
        footer={
          <>
            <Box component="span" whiteSpace="nowrap">
              Some crazy stat text here
            </Box>
          </>
        }
      />
    </>
  );
};

export default Example;

Alertnative Page PRO

CardInfoBg

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import { useTheme } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
// @material-ui/icons components
import MoreHoriz from "@material-ui/icons/MoreHoriz";

// core components
import CardInfoBg from "components/Cards/Alternative/CardInfoBg.js";

import componentStyles from "assets/theme/views/admin/alternative-dashboard.js";
import componentStylesCardDeck from "assets/theme/components/cards/card-deck.js";

const useStyles = makeStyles(componentStyles);
const useStylesCardDeck = makeStyles(componentStylesCardDeck);

const infoCards = [
  {
    color: "primary",
    subtitle: "Tasks completed",
    title: "8/24",
    progressColor: "success",
    progressValue: 30,
  },
];

const DropdownComponent = ({ id }) => {
  const classes = { ...useStyles(), ...useStylesCardDeck() };
  const [anchorEl, setAnchorEl] = React.useState(null);
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };
  return (
    <>
      <Button
        aria-controls={"simple-menu-" + id}
        aria-haspopup="true"
        onClick={handleClick}
        size="small"
        className={classes.buttonRoot}
      >
        <Box
          component={MoreHoriz}
          width="1.25rem!important"
          height="1.25rem!important"
          position="relative"
          top="2px"
        />
      </Button>
      <Menu
        id={"simple-menu-" + id}
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose}>Action</MenuItem>
        <MenuItem onClick={handleClose}>Another action</MenuItem>
        <MenuItem onClick={handleClose}>Something else here</MenuItem>
      </Menu>
    </>
  );
};

const AnchorComponent = () => {
  const theme = useTheme();
  return (
    <>
      <Box
        color={theme.palette.white.main}
        fontWeight="600"
        whiteSpace="nowrap"
        textDecoration="none"
        component="a"
      >
        See details
      </Box>
    </>
  );
};

function AlternativeDashboard() {
  return (
    <>
        {infoCards.map((prop, key) => (
            <CardInfoBg
              color={prop.color}
              subtitle={prop.subtitle}
              title={prop.title}
              progressValue={prop.progressValue}
              progressColor={prop.progressColor}
              rightAction={<DropdownComponent id={key} />}
              bottomAction={<AnchorComponent />}
            />
        ))}
    </>
  );
}

export default AlternativeDashboard;

CardPageVisitsAlternative

Page visits

Project Budget Status Users Completion
Image placeholder
Argon Design System
$2500 USD pending
60%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
React Material Dashboard
$4400 USD on schedule
90%
Image placeholder
Vue Paper UI Kit PRO
$2200 USD completed
100%
Image placeholder
Argon Design System
$2500 USD pending
60%
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardPageVisitsAlternative from "components/Cards/Alternative/CardPageVisitsAlternative.js";

const Example = () => {
  return (
    <>
      <CardPageVisitsAlternative />
    </>
  );
};

export default Example;

CardProgressTrackAlternative

Progress track
  • Argon Design System
  • Angular Now UI Kit PRO
  • Black Dashboard
  • React Material Dashboard
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardProgressTrackAlternative from "components/Cards/Alternative/CardProgressTrackAlternative.js";

const Example = () => {
  return (
    <>
      <CardProgressTrackAlternative />
    </>
  );
};

export default Example;

CardRealTime

Real time
  • Country flag
    Country:
    United States
    Visits:
    2500
    Bounce:
    30%
  • Country flag
    Country:
    Germany
    Visits:
    2500
    Bounce:
    30%
  • Country flag
    Country:
    Great Britain
    Visits:
    2500
    Bounce:
    30%
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardRealTime from "components/Cards/Alternative/CardRealTime.js";

const Example = () => {
  return (
    <>
      <CardRealTime />
    </>
  );
};

export default Example;

CardSalesValueAlternative

Overview

Sales value

Performance

Total orders

import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardSalesValueAlternative from "components/Cards/Alternative/CardSalesValueAlternative.js";

const Example = () => {
  return (
    <>
      <CardSalesValueAlternative />
    </>
  );
};

export default Example;

Cards Page PRO

CardBgImage

Card image
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardBgImage from "components/Cards/Cards/CardBgImage.js";

const Example = () => {
  return (
    <>
      <CardBgImage />
    </>
  );
};

export default Example;

CardBlog

Image placeholder
Get started with Argon
by John Snow on Oct 29th at 10:23 AM

Argon is a great free UI package based on Bootstrap 4 that includes the most important components and features.

View article
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardBlog from "components/Cards/Cards/CardBlog.js";

const Example = () => {
  return (
    <>
      <CardBlog />
    </>
  );
};

export default Example;

CardButton

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.

Go somewhere
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardButton from "components/Cards/Cards/CardButton.js";

const Example = () => {
  return (
    <>
      <CardButton />
    </>
  );
};

export default Example;

CardHeader

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.

Go somewhere
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardHeader from "components/Cards/Cards/CardHeader.js";

const Example = () => {
  return (
    <>
      <CardHeader />
    </>
  );
};

export default Example;

CardHeaderAction

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.

Go somewhere
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardHeaderAction from "components/Cards/Cards/CardHeaderAction.js";

const Example = () => {
  return (
    <>
      <CardHeaderAction />
    </>
  );
};

export default Example;

CardHeaderList

Image placeholder
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.

Go somewhere
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardHeaderList from "components/Cards/Cards/CardHeaderList.js";

const Example = () => {
  return (
    <>
      <CardHeaderList />
    </>
  );
};

export default Example;

CardPricingCards

Bravo pack

$49
per application
  • Complete documentation
  • Working materials in Sketch
  • 2GB cloud storage
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardPricingCards from "components/Cards/Cards/CardPricingCards.js";

const Example = () => {
  return (
    <>
      <CardPricingCards />
    </>
  );
};

export default Example;

CardPricingGradientCards

Bravo pack

$49
per application
  • Complete documentation
  • Working materials in Sketch
  • 2GB cloud storage
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardPricingGradientCards from "components/Cards/Cards/CardPricingGradientCards.js";

const Example = () => {
  return (
    <>
      <CardPricingGradientCards />
    </>
  );
};

export default Example;

CardProfileCards

Image placeholder
22 Friends
10 Photos
89 Comments
Jessica Jones, 27
Bucharest, Romania
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardProfileCards from "components/Cards/Cards/CardProfileCards.js";

const Example = () => {
  return (
    <>
      <CardProfileCards />
    </>
  );
};

export default Example;

CardTeamMember

John Snow

Working remoteley

Active
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardTeamMember from "components/Cards/Cards/CardTeamMember.js";

const Example = () => {
  return (
    <>
      <CardTeamMember />
    </>
  );
};

export default Example;

CardTeamMemberInfo

Ryan Tompson Web Developer
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardTeamMemberInfo from "components/Cards/Cards/CardTeamMemberInfo.js";

const Example = () => {
  return (
    <>
      <CardTeamMemberInfo />
    </>
  );
};

export default Example;

CardTestimonial

Testimonial

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardTestimonial from "components/Cards/Cards/CardTestimonial.js";

const Example = () => {
  return (
    <>
      <CardTestimonial />
    </>
  );
};

export default Example;

Charts Page PRO

CardAffiliateTraffic

Total traffic
350,897

3.48% Since last month

import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardAffiliateTraffic from "components/Cards/Charts/CardAffiliateTraffic.js";

const Example = () => {
  return (
    <>
      <CardAffiliateTraffic />
    </>
  );
};

export default Example;

CardAudienceOverview

Users
Audience overview
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardAudienceOverview from "components/Cards/Charts/CardAudienceOverview.js";

const Example = () => {
  return (
    <>
      <CardAudienceOverview />
    </>
  );
};

export default Example;

CardProductComparison

Overview
Product comparison
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardProductComparison from "components/Cards/Charts/CardProductComparison.js";

const Example = () => {
  return (
    <>
      <CardProductComparison />
    </>
  );
};

export default Example;

CardSalesValueDots

Growth
Sales value
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardSalesValueDots from "components/Cards/Charts/CardSalesValueDots.js";

const Example = () => {
  return (
    <>
      <CardSalesValueDots />
    </>
  );
};

export default Example;

CardTotalOrders

Performance
Total orders
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardTotalOrders from "components/Cards/Charts/CardTotalOrders.js";

const Example = () => {
  return (
    <>
      <CardTotalOrders />
    </>
  );
};

export default Example;

Dashboard Page PRO

CardActivityFeed

Activity feed
John Snow 3 days ago

Personal profiles are the perfect way for you to grab their attention and persuade recruiters to continue reading your CV because you’re telling them from the off exactly why they should hire you.

Image placeholder
Image placeholder
Michael Lewis

Cras sit amet nibh libero nulla vel metus scelerisque ante sollicitudin. Cras purus odio vestibulum in vulputate viverra turpis.

Image placeholder
Jessica Stones

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.


Image placeholder
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardActivityFeed from "components/Cards/Dashboard/CardActivityFeed.js";

const Example = () => {
  return (
    <>
      <CardActivityFeed />
    </>
  );
};

export default Example;

CardCredit

Image placeholder
Active
Username
@johnsnow
Name John Snow
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardCredit from "components/Cards/Dashboard/CardCredit.js";

const Example = () => {
  return (
    <>
      <CardCredit />
    </>
  );
};

export default Example;

CardCreditDetails

$ 3,300
Your current balance
+ 15% ($250)
Orders: 60%
Sales: 40%
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardCreditDetails from "components/Cards/Dashboard/CardCreditDetails.js";

const Example = () => {
  return (
    <>
      <CardCreditDetails />
    </>
  );
};

export default Example;

CardLightTable

Light table

Project Budget Status Users Completion
Image placeholder
Argon Design System
$2500 USD pending
60%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
React Material Dashboard
$4400 USD on schedule
90%
Image placeholder
Vue Paper UI Kit PRO
$2200 USD completed
100%
Image placeholder
Argon Design System
$2500 USD pending
60%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardLightTable from "components/Cards/Dashboard/CardLightTable.js";

const Example = () => {
  return (
    <>
      <CardLightTable />
    </>
  );
};

export default Example;

CardPageVisits

Page visits

Page name Visitors Unique users Bounce rate
/argon/ 4,569 340 46,53%
/argon/index.html 3,985 319 46,53%
/argon/charts.html 3,513 294 36,49%
/argon/tables.html 2,050 147 50,87%
/argon/profile.html 1,795 190 46,53%
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardPageVisits from "components/Cards/Dashboard/CardPageVisits.js";

const Example = () => {
  return (
    <>
      <CardPageVisits />
    </>
  );
};

export default Example;

CardProgressTrack

Progress track
  • Argon Design System
  • Angular Now UI Kit PRO
  • Black Dashboard
  • React Material Dashboard
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardProgressTrack from "components/Cards/Dashboard/CardProgressTrack.js";

const Example = () => {
  return (
    <>
      <CardProgressTrack />
    </>
  );
};

export default Example;

CardSalesValue

Overview
Sales value
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardSalesValue from "components/Cards/Dashboard/CardSalesValue.js";

const Example = () => {
  return (
    <>
      <CardSalesValue />
    </>
  );
};

export default Example;

CardSocialTraffic

Social traffic

Referral Visitors
Facebook 1,480
60%
Facebook 5,480
70%
Google 4,807
80%
Instagram 3,678
75%
twitter 2,645
30%
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardSocialTraffic from "components/Cards/Dashboard/CardSocialTraffic.js";

const Example = () => {
  return (
    <>
      <CardSocialTraffic />
    </>
  );
};

export default Example;

CardStats

Sales
924

Some crazy stat text here

import React from "react";
// @material-ui/core components
import Box from "@material-ui/core/Box";
// @material-ui/icons components
import GroupAdd from "@material-ui/icons/GroupAdd";
// core components
import CardStats from "components/Cards/Dashboard/CardStats.js";

const Example = () => {
  return (
    <>
      <CardStats
        subtitle="Sales"
        title="924"
        icon={GroupAdd}
        color="bgWarningLight"
        footer={
          <>
            <Box component="span" whiteSpace="nowrap">
              Some crazy stat text here
            </Box>
          </>
        }
      />
    </>
  );
};

export default Example;

CardTeamMembers

Team members
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardTeamMembers from "components/Cards/Dashboard/CardTeamMembers.js";

const Example = () => {
  return (
    <>
      <CardTeamMembers />
    </>
  );
};

export default Example;

CardToDoList

To do list
  • Call with Dave
    10:30 AM
  • Lunch meeting
    10:30 AM
  • Argon Dashboard Launch
    10:30 AM
  • Winter Hackaton
    10:30 AM
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardToDoList from "components/Cards/Dashboard/CardToDoList.js";

const Example = () => {
  return (
    <>
      <CardToDoList />
    </>
  );
};

export default Example;

Index Page PRO

CardInfo

Components

Argon comes with over 70 handcrafted components.

import React from "react";
// @material-ui/core components
// @material-ui/icons components
import TouchApp from "@material-ui/icons/TouchApp";
// core components
import CardInfo from "components/Cards/Index/CardInfo.js";

const IndexHeader = () => {
  return (
    <>
      <CardInfo
        subtitle="Argon comes with over 70 handcrafted components."
        title="Components"
        icon={TouchApp}
        color="red"
      />
    </>
  );
};

export default IndexHeader;

CardInfoBadges

Based on Bootstrap 4

Argon is built on top of the most popular open source toolkit for developing with HTML, CSS, and JS.

bootstrap 4 dashboard template
import React from "react";
// @material-ui/core components
// @material-ui/icons components
import Done from "@material-ui/icons/Done";
// core components
import CardInfoBadges from "components/Cards/Index/CardInfoBadges.js";


export default function Index() {
  return (
    <>
      <CardInfoBadges
        icon={Done}
        color="blue"
        title="Based on React and Material-UI"
        subtitle="Argon is built on top of the most popular open source toolkit for developing with HTML, CSS, and JS."
        badges={["react", "material-ui", "hooks", "template"]}
      />
    </>
  );
}

Pricing Page PRO

CardPricing

Bravo pack

$49
per application
  • Complete documentation
  • Working materials in Sketch
  • 2GB cloud storage
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardPricing from "components/Cards/Pricing/CardPricing.js";

const Example = () => {
  return (
    <>
      <CardPricing />
    </>
  );
};

export default Example;

CardPricingGradient

Alpha pack

$199
per application
  • Complete documentation
  • Working materials in Sketch
  • 2GB cloud storage
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardPricingGradient from "components/Cards/Pricing/CardPricingGradient.js";

const Example = () => {
  return (
    <>
      <CardPricingGradient />
    </>
  );
};

export default Example;

Profile Page PRO

CardProfile

Image placeholder
22 Friends
10 Photos
89 Comments
Jessica Jones, 27
Bucharest, Romania
Solution Manager - Creative Tim Officer
University of Computer Science
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardProfile from "components/Cards/Profile/CardProfile.js";

const Example = () => {
  return (
    <>
      <CardProfile />
    </>
  );
};

export default Example;

Sortable Page PRO

CardDarkTableSortable

Dark table

Project Budget Status Users Completion
Image placeholder
Argon Design System
$2500 USD pending
60%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
React Material Dashboard
$4400 USD on schedule
90%
Image placeholder
Vue Paper UI Kit PRO
$2200 USD completed
100%
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardDarkTableSortable from "components/Cards/Sortable/CardDarkTableSortable.js";

const Example = () => {
  return (
    <>
      <CardDarkTableSortable />
    </>
  );
};

export default Example;

CardLightTableSortable

Light table

Project Budget Status Users Completion
Image placeholder
Argon Design System
$2500 USD pending
60%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
React Material Dashboard
$4400 USD on schedule
90%
Image placeholder
Vue Paper UI Kit PRO
$2200 USD completed
100%
  </div>

</div>

import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardLightTableSortable from "components/Cards/Sortable/CardLightTableSortable.js";

const Example = () => {
  return (
    <>
      <CardLightTableSortable />
    </>
  );
};

export default Example;

CardTranslucentTableSortable

Translucent table

Project Budget Status Users Completion
Image placeholder
Argon Design System
$2500 USD pending
60%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
React Material Dashboard
$4400 USD on schedule
90%
Image placeholder
Vue Paper UI Kit PRO
$2200 USD completed
100%
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardTranslucentTableSortable from "components/Cards/Sortable/CardTranslucentTableSortable.js";

const Example = () => {
  return (
    <>
      <CardTranslucentTableSortable />
    </>
  );
};

export default Example;

Tables Page PRO

CardCheckboxes

Checkbox + Toggles

Author Created at Product Active
John Michael 10/09/2018 Argon Dashboard PRO
Alex Smith 08/09/2018 Argon Design System
Samantha Ivy 30/08/2018 Black Dashboard
John Michael 10/09/2018 Argon Dashboard PRO
John Michael 10/09/2018 Argon Dashboard PRO
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardCheckboxes from "components/Cards/Tables/CardCheckboxes.js";

const Example = () => {
  return (
    <>
      <CardCheckboxes />
    </>
  );
};

export default Example;

CardCheckboxesColors

Checkbox + Labels

Author Created at Product Active
John Michael 10/09/2018 Argon Dashboard PRO
Alex Smith 08/09/2018 Argon Design System
Samantha Ivy 30/08/2018 Black Dashboard
John Michael 10/09/2018 Argon Dashboard PRO
John Michael 10/09/2018 Argon Dashboard PRO
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardCheckboxesColors from "components/Cards/Tables/CardCheckboxesColors.js";

const Example = () => {
  return (
    <>
      <CardCheckboxesColors />
    </>
  );
};

export default Example;

CardDarkTableTables

Dark table

Project Budget Status Users Completion
Image placeholder
Argon Design System
$2500 USD pending
60%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
React Material Dashboard
$4400 USD on schedule
90%
Image placeholder
Vue Paper UI Kit PRO
$2200 USD completed
100%
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardDarkTableTables from "components/Cards/Tables/CardDarkTableTables.js";

const Example = () => {
  return (
    <>
      <CardDarkTableTables />
    </>
  );
};

export default Example;

CardInlineActions

Inline actions

Author Created at Product
John Michael 10/09/2018 Argon Dashboard PRO
Alex Smith 08/09/2018 Argon Design System
Samantha Ivy 30/08/2018 Black Dashboard
John Michael 10/09/2018 Argon Dashboard PRO
John Michael 10/09/2018 Argon Dashboard PRO
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardInlineActions from "components/Cards/Tables/CardInlineActions.js";

const Example = () => {
  return (
    <>
      <CardInlineActions />
    </>
  );
};

export default Example;

CardInlineActionsStripped

Striped table

Author Created at Product
John Michael 10/09/2018 Argon Dashboard PRO
Alex Smith 08/09/2018 Argon Design System
Samantha Ivy 30/08/2018 Black Dashboard
John Michael 10/09/2018 Argon Dashboard PRO
John Michael 10/09/2018 Argon Dashboard PRO
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardInlineActionsStripped from "components/Cards/Tables/CardInlineActionsStripped.js";

const Example = () => {
  return (
    <>
      <CardInlineActionsStripped />
    </>
  );
};

export default Example;

CardLightTableTables

Light table

Project Budget Status Users Completion
Image placeholder
Argon Design System
$2500 USD pending
60%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
React Material Dashboard
$4400 USD on schedule
90%
Image placeholder
Vue Paper UI Kit PRO
$2200 USD completed
100%
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardLightTableTables from "components/Cards/Tables/CardLightTableTables.js";

const Example = () => {
  return (
    <>
      <CardLightTableTables />
    </>
  );
};

export default Example;

CardTranslucentTableTables

Translucent table

Project Budget Status Users Completion
Image placeholder
Argon Design System
$2500 USD pending
60%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
React Material Dashboard
$4400 USD on schedule
90%
Image placeholder
Vue Paper UI Kit PRO
$2200 USD completed
100%
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardTranslucentTableTables from "components/Cards/Tables/CardTranslucentTableTables.js";

const Example = () => {
  return (
    <>
      <CardTranslucentTableTables />
    </>
  );
};

export default Example;

Widgets Page PRO

CardCalendar

import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardCalendar from "components/Cards/Widgets/CardCalendar.js";

const Example = () => {
  return (
    <>
      <CardCalendar />
    </>
  );
};

export default Example;

CardCreditInputs

Image placeholder
Make default
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardCreditInputs from "components/Cards/Widgets/CardCreditInputs.js";

const Example = () => {
  return (
    <>
      <CardCreditInputs />
    </>
  );
};

export default Example;

CardCreditNumber

Image placeholder
Active
Card number
4358
7421
9256
6682
Name John Snow
Expiry date 11/23
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardCreditNumber from "components/Cards/Widgets/CardCreditNumber.js";

const Example = () => {
  return (
    <>
      <CardCreditNumber />
    </>
  );
};

export default Example;

CardCreditSimple

Image placeholder
Active
PayPal E-mail
Name John Snow
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardCreditSimple from "components/Cards/Widgets/CardCreditSimple.js";

const Example = () => {
  return (
    <>
      <CardCreditSimple />
    </>
  );
};

export default Example;

CardLatestMessages

import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardLatestMessages from "components/Cards/Widgets/CardLatestMessages.js";

const Example = () => {
  return (
    <>
      <CardLatestMessages />
    </>
  );
};

export default Example;

CardLatestNotifications

Latest notifications
New message
2 hrs ago
Let's meet at Starbucks at 11:30. Wdyt?
Product issue
3 hrs ago
A new issue has been reported for Argon.
New likes
5 hrs ago
Your posts have been liked a lot.
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardLatestNotifications from "components/Cards/Widgets/CardLatestNotifications.js";

const Example = () => {
  return (
    <>
      <CardLatestNotifications />
    </>
  );
};

export default Example;

CardStatsGradient

Total traffic
350,897

3.48% Since last month

import React from "react";
// @material-ui/core components
import { useTheme } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
// @material-ui/icons components
import ArrowUpward from "@material-ui/icons/ArrowUpward";
import TrendingUp from "@material-ui/icons/TrendingUp";
// core components
import CardStatsGradient from "components/Cards/Widgets/CardStatsGradient.js";

function Profile() {
  const theme = useTheme();
  return (
    <>
      <CardStatsGradient
        subtitle="Total Traffic"
        title="350,897"
        icon={TrendingUp}
        color="bgGradientSuccess"
        footer={
          <>
            <Box
              component="span"
              fontSize=".875rem"
              color={theme.palette.white.main}
              marginRight=".5rem"
              display="flex"
              alignItems="center"
            >
              <Box
                component={ArrowUpward}
                width="1.5rem!important"
                height="1.5rem!important"
              />{" "}
              3.48%
            </Box>
            <Box
              component="span"
              whiteSpace="nowrap"
              color={theme.palette.gray[400]}
            >
              Since last month
            </Box>
          </>
        }
      />
    </>
  );
}

export default Profile;

CardTeamMembersSearch

Team members
import React from "react";
// @material-ui/core components
// @material-ui/icons components
// core components
import CardTeamMembersSearch from "components/Cards/Widgets/CardTeamMembersSearch.js";

const Example = () => {
  return (
    <>
      <CardTeamMembersSearch />
    </>
  );
};

export default Example;

Props

We’ve added all props for all cards down here. If the card name does not appear in the bellow list, it means it is only static code.

CardInfoBg PRO

CardInfoBg.propTypes = {
  subtitle: PropTypes.string,
  title: PropTypes.string,
  color: PropTypes.oneOf([
    "primary",
    "info",
    "error",
    "warning",
    "default",
    "success",
  ]),
  rightAction: PropTypes.node,
  bottomAction: PropTypes.node,
  progressValue: PropTypes.number,
  progressColor: PropTypes.oneOf([
    "primary",
    "info",
    "error",
    "warning",
    "default",
    "success",
  ]),
};

CardStats

Card.propTypes = {
  className: PropTypes.string,
  plain: PropTypes.bool,
  profile: PropTypes.bool,
  blog: PropTypes.bool,
  raised: PropTypes.bool,
  background: PropTypes.bool,
  pricing: PropTypes.bool,
  testimonial: PropTypes.bool,
  color: PropTypes.oneOf([
    "primary",
    "info",
    "success",
    "warning",
    "danger",
    "rose",
  ]),
  product: PropTypes.bool,
  chart: PropTypes.bool,
  login: PropTypes.bool,
  children: PropTypes.node,
};

CardInfo PRO

CardInfo.defaultProps = {
  color: "red",
};

CardInfo.propTypes = {
  subtitle: PropTypes.string,
  title: PropTypes.string,
  icon: PropTypes.oneOfType([
    // i.e. an icon name from Nucleo Icons - e.g. ni ni-atom
    // // or an icon name from Font Awesome - e.g. fa fa-heart
    PropTypes.string,
    // i.e. a component from @material-ui/icons
    PropTypes.object,
  ]),
  color: PropTypes.oneOf(["red", "green", "blue", "orange"]),
};

CardInfoBadges PRO

CardInfo.defaultProps = {
  color: "red",
  badges: [],
};

CardInfo.propTypes = {
  subtitle: PropTypes.string,
  title: PropTypes.string,
  icon: PropTypes.oneOfType([
    // i.e. an icon name from Nucleo Icons - e.g. ni ni-atom
    // // or an icon name from Font Awesome - e.g. fa fa-heart
    PropTypes.string,
    // i.e. a component from @material-ui/icons
    PropTypes.object,
  ]),
  color: PropTypes.oneOf(["red", "green", "blue", "orange"]),
  badges: PropTypes.arrayOf(PropTypes.string),
};

CardStatsGradient PRO

CardStatsGradient.defaultProps = {
  color: "bgGradientError",
};

CardStatsGradient.propTypes = {
  subtitle: PropTypes.string,
  title: PropTypes.string,
  footer: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
  icon: PropTypes.oneOfType([
    // i.e. an icon name from Nucleo Icons - e.g. ni ni-atom
    // // or an icon name from Font Awesome - e.g. fa fa-heart
    PropTypes.string,
    // i.e. a component from @material-ui/icons
    PropTypes.object,
  ]),
  color: PropTypes.oneOf([
    "bgGradientDefault",
    "bgGradientError",
    "bgGradientSuccess",
    "bgGradientPrimary",
    "bgGradientInfo",
    "bgGradientWarning",
  ]),
};