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

A card is a sheet of material that serves as an entry point to more detailed information.

material-web-components provides a light framework for structuring cards, but the actual content layout will require a bit of custom CSS.

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

import {
  Card,
  CardPrimaryAction,
  CardMedia,
  CardActionButton,
  CardActionIcon,
  CardActions,
  CardActionButtons,
  CardActionIcons
} from '@rmwc/card';

import { Typography } from '@rmwc/typography';
<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

import { Card, CardPrimaryAction, CardAction, CardActions } from '@rmwc/card';
import { ListDivider } from '@rmwc/list';
import { Icon } from '@rmwc/icon';
import { Typography } from '@rmwc/typography';
<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

import {
  Card,
  CardPrimaryAction,
  CardMedia,
  CardMediaContent,
  CardAction,
  CardActionIcons,
  CardActions
} from '@rmwc/card';
<Card style={{ width: '12.5rem' }}>
  <CardPrimaryAction>
    <CardMedia
      square
      style={{
        backgroundImage:
          'url(https://material-components-web.appspot.com/images/1-1.jpg)'
      }}
    >
      <CardMediaContent>
        <Typography
          use="subheading2"
          tag="div"
          theme="text-primary-on-dark"
          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>

import { Docs } from '@rmwc/base/utils/document-component';
import * as docs from './docgen.json';

<Docs src={docs} components={[
  'Card',
  'CardPrimaryAction',
  'CardMedia',
  'CardMediaContent',
  'CardActions',
  'CardActionButtons',
  'CardActionIcons',
  'CardActionIcon',
  'CardActionButton'
]}/>