Package Exports

@rmwc/card
@rmwc/card/README.md

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@rmwc/card) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Cards

Cards contain content and actions about a single subject.

Module @rmwc/card
Import styles:
- import '@material/card/dist/mdc.card.css'
- import '@material/button/dist/mdc.button.css'
- import '@material/icon-button/dist/mdc.icon-button.css'
MDC Docs: https://material.io/develop/web/components/cards/

Fully Featured Example

<Card style={{ width: '21rem' }}>
  <CardPrimaryAction>
    <CardMedia
      sixteenByNine
      style={{
        backgroundImage:
          'url(https://material-components-web.appspot.com/images/16-9.jpg)'
      }}
    />
    <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>

Article Preview Example

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

Mini Card Example

<Card style={{ width: '12.5rem' }}>
  <CardPrimaryAction>
    <CardMedia
      square
      style={{
        backgroundImage:
          'url(https://material-components-web.appspot.com/images/1-1.jpg)'
      }}
    >
      <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>

Card

A Card Component

Props

Name	Type	Description
`outlined`	`undefined	false

CardPrimaryAction

The main clickable area for the primary content of the card

CardMedia

Media area that displays a custom background-image with background-size: cover

Props

Name	Type	Description
`sixteenByNine`	`undefined	false
`square`	`undefined	false

CardMediaContent

An absolutely-positioned box the same size as the media area, for displaying a title or icon on top of the background-image

CardActions

Row containing action buttons and/or icons

Props

Name	Type	Description
`fullBleed`	`undefined	false

CardActionButtons

A group of action buttons, displayed on the left side of the card (in LTR), adjacent to CardActionIcons

CardActionIcons

A group of supplemental action icons, displayed on the right side of the card (in LTR), adjacent to CardActionButtons

CardActionIcon

A card action Icon

Props

Name	Type	Description
`checked`	`undefined	false
`disabled`	`undefined	false
`icon`	`RMWC.IconPropT`	Icon for the button
`onChange`	`undefined	(evt: RMWC.CustomEventT<>) => void`
`onIcon`	`RMWC.IconPropT`	If specified, renders a toggle with this icon as the on state.
`ripple`	`RipplePropT`	Adds a ripple effect to the component

CardActionButton

A card action Button

Props

Name	Type	Description
`children`	`React.ReactNode`	Content specified as children.
`dense`	`undefined	false
`disabled`	`undefined	false
`icon`	`RMWC.IconPropT`	An Icon for the Button
`label`	`React.ReactNode	any`
`outlined`	`undefined	false
`raised`	`undefined	false
`ripple`	`RipplePropT`	Adds a ripple effect to the component
`trailingIcon`	`RMWC.IconPropT`	A trailing icon for the Button
`unelevated`	`undefined	false