Material-UI Core Cards

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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"]}
      />
    </>
  );
}

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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",
  ]),
};

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.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"]),
};

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.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",
  ]),
};