Cards

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'
- MDC Docs: https://material.io/develop/web/components/cards/

Fully Featured Example

``jsx


sixteenByNine
style={{
backgroundImage: 'url(images/backgrounds/mb-bg-fb-16.png)'
}}
/>


`jsx

use="subtitle1"
tag="div"
style={{ padding: '0.5rem 1rem' }}
theme="textSecondaryOnBackground"
>
Headlines



label="All Business Headlines"
trailingIcon="arrow_forward"
/>


`

Mini Card Example

`jsx


square
style={{
backgroundImage: 'url(images/backgrounds/mb-bg-fb-06.png)'
}}
>

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












`

Card

| Name | Type | Description |
|------|------|-------------|
| outlined | boolean | Removes the shadow and displays a hairline outline instead |

CardPrimaryAction

| 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 |

CardMediaContent

| 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 |

CardActionButtons

| Name | Type | Description |
|------|------|-------------|
| checked | boolean | Controls the on / off state of the a toggleable button. |
| disabled | boolean | Makes the button disabled |
| foundationRef | Ref> | 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 |

CardActionButton

| 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. |