Cards contain content and actions about a single subject.
- Module @rmwc/card
- Import styles:
- Using CSS Loader
- import '@rmwc/card/styles';
- Or include stylesheets
- '@material/card/dist/mdc.card.css'
- '@material/button/dist/mdc.button.css'
- '@material/icon-button/dist/mdc.icon-button.css'
- Using CSS Loader
- MDC Docs: https://material.io/develop/web/components/cards/
<Card style={{ width: '21rem' }}>
<CardPrimaryAction>
<CardMedia
sixteenByNine
style={{
backgroundImage: 'url(images/backgrounds/mb-bg-fb-16.png)'
}}
/>
<div style={{ padding: '0 1rem 1rem 1rem' }}>
<Typography use="headline6" tag="h2">
Our Changing Planet
</Typography>
<Typography
use="subtitle2"
tag="h3"
theme="textSecondaryOnBackground"
style={{ marginTop: '-1rem' }}
>
by Kurt Wagner
</Typography>
<Typography
use="body1"
tag="div"
theme="textSecondaryOnBackground"
>
Visit ten places on our planet that are undergoing the biggest
changes today.
</Typography>
</div>
</CardPrimaryAction>
<CardActions>
<CardActionButtons>
<CardActionButton>Read</CardActionButton>
<CardActionButton>Bookmark</CardActionButton>
</CardActionButtons>
<CardActionIcons>
<CardActionIcon onIcon="favorite" icon="favorite_border" />
<CardActionIcon icon="share" />
<CardActionIcon icon="more_vert" />
</CardActionIcons>
</CardActions>
</Card>
<Card outlined style={{ width: '21rem' }}>
<Typography
use="subtitle1"
tag="div"
style={{ padding: '0.5rem 1rem' }}
theme="textSecondaryOnBackground"
>
Headlines
</Typography>
<ListDivider />
<CardPrimaryAction>
<div style={{ padding: '1rem' }}>
<Typography use="headline5" tag="div">
Copper on the rise
</Typography>
<Typography use="body1" tag="p" theme="textSecondaryOnBackground">
Copper price soars amid global market optimism and increased
demand.
</Typography>
</div>
</CardPrimaryAction>
<ListDivider />
<CardPrimaryAction>
<div style={{ padding: '1rem' }}>
<Typography use="headline5" tag="div">
U.S. tech startups rebound
</Typography>
<Typography use="body1" tag="p" theme="textSecondaryOnBackground">
Favorable business conditions have allowed startups to secure
more fundraising deals compared to last year.
</Typography>
</div>
</CardPrimaryAction>
<ListDivider />
<CardPrimaryAction>
<div style={{ padding: '1rem' }}>
<Typography use="headline5" tag="div">
Asia's clean energy ambitions
</Typography>
<Typography use="body1" tag="p" theme="textSecondaryOnBackground">
China plans to invest billions of dollars for the development of
over 300 clean energy projects in Southeast Asia.
</Typography>
</div>
</CardPrimaryAction>
<ListDivider />
<CardActions fullBleed>
<CardActionButton
label="All Business Headlines"
trailingIcon="arrow_forward"
/>
</CardActions>
</Card>
<Card style={{ width: '12.5rem' }}>
<CardPrimaryAction>
<CardMedia
square
style={{
backgroundImage: 'url(images/backgrounds/mb-bg-fb-06.png)'
}}
>
<CardMediaContent>
<Typography
use="subtitle2"
tag="div"
theme="textPrimaryOnDark"
style={{
padding: '0.5rem 1rem',
backgroundImage:
'linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 100%)',
bottom: '0',
left: '0',
right: '0',
position: 'absolute'
}}
>
Vacation Photos
</Typography>
</CardMediaContent>
</CardMedia>
</CardPrimaryAction>
<CardActions>
<CardActionIcons>
<CardActionIcon onIcon="favorite" icon="favorite_border" />
<CardActionIcon icon="bookmark_border" />
<CardActionIcon icon="share" />
</CardActionIcons>
</CardActions>
</Card>
A Card Component
Name | Type | Description |
---|---|---|
outlined |
boolean |
Removes the shadow and displays a hairline outline instead |
The main clickable area for the primary content of the card
Media area that displays a custom background-image with background-size: cover
Name | Type | Description |
---|---|---|
sixteenByNine |
boolean |
Automatically scales the media area’s height according to its width, maintaining a 16:9 aspect ratio |
square |
boolean |
Automatically scales the media area’s height to equal its width |
An absolutely-positioned box the same size as the media area, for displaying a title or icon on top of the background-image
Row containing action buttons and/or icons
Name | Type | Description |
---|---|---|
fullBleed |
boolean |
Removes the action area’s padding and causes its only child (an mdc-card__action element) to consume 100% of the action area’s width |
A group of action buttons, displayed on the left side of the card (in LTR), adjacent to CardActionIcons
A group of supplemental action icons, displayed on the right side of the card (in LTR), adjacent to CardActionButtons
A card action Icon
Name | Type | Description |
---|---|---|
checked |
boolean |
Controls the on / off state of the a toggleable button. |
disabled |
boolean |
Makes the button disabled |
foundationRef |
Ref<MDCIconButtonToggleFoundation<>> |
Advanced: A reference to the MDCFoundation. Only for Toggleable buttons. |
icon |
IconPropT |
Icon for the button |
label |
string |
Apply an aria label. |
onChange |
(evt: IconButtonOnChangeEventT) => void |
An onChange callback that receives a custom event. evt.detail = { isOn: boolean } |
onIcon |
IconPropT |
If specified, renders a toggle with this icon as the on state. |
ripple |
RipplePropT |
Adds a ripple effect to the component |
A card action Button
Name | Type | Description |
---|---|---|
children |
ReactNode |
Content specified as children. |
danger |
boolean |
Used to indicate a dangerous action. |
dense |
boolean |
Make the Button dense. |
disabled |
boolean |
Make the button disabled |
icon |
IconPropT |
An Icon for the Button |
label |
any |
Content specified as a label prop. |
outlined |
boolean |
Make the button outlined. |
raised |
boolean |
Make the Button raised. |
ripple |
RipplePropT |
Adds a ripple effect to the component |
touch |
boolean |
Makes the button more touch friendly. This will automatically be set true if used inside of TouchTargetWrapper. |
trailingIcon |
IconPropT |
A trailing icon for the Button |
unelevated |
boolean |
Make the button unelevated. |