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:
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
Project
Budget
Status
Users
Completion
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$4400 USD
on schedule
$2200 USD
completed
$2500 USD
pending
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
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
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
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 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
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 ;
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 ;
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 ;
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 ;
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
$49
per application
Working materials in Sketch
Start free trial
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
$49
per application
Working materials in Sketch
Start free trial
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
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
Working remoteley
●
Active
Add
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.
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
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
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
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
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
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
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.
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
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)
Add credit
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
Project
Budget
Status
Users
Completion
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$4400 USD
on schedule
$2200 USD
completed
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$1800 USD
completed
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 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
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
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
Referral
Visitors
Facebook
1,480
Facebook
5,480
Google
4,807
Instagram
3,678
twitter
2,645
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
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
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
Argon Dashboard Launch
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
$49
per application
Working materials in Sketch
Start free trial
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
$199
per application
Working materials in Sketch
Start free trial
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
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
Project
Budget
Status
Users
Completion
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$4400 USD
on schedule
$2200 USD
completed
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
Project
Budget
Status
Users
Completion
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$4400 USD
on schedule
$2200 USD
completed
</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
Project
Budget
Status
Users
Completion
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$4400 USD
on schedule
$2200 USD
completed
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
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
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
Project
Budget
Status
Users
Completion
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$4400 USD
on schedule
$2200 USD
completed
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
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
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
Project
Budget
Status
Users
Completion
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$4400 USD
on schedule
$2200 USD
completed
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
Project
Budget
Status
Users
Completion
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$4400 USD
on schedule
$2200 USD
completed
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 ;
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
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
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
Let's meet at Starbucks at 11:30. Wdyt?
A new issue has been reported for Argon.
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
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 ;
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 " ,
]),
};
Michael Lewis
Cras sit amet nibh libero nulla vel metus scelerisque ante sollicitudin. Cras purus odio vestibulum in vulputate viverra turpis.