# @rmwc/card

> RMWC Card component

Latest version **14.3.5** (published 2024-10-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rmwc/card
pnpm add @rmwc/card
yarn add @rmwc/card
bun add @rmwc/card
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 14.3.5 |
| Published | 2024-10-24 |
| First published | 2018-09-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 17.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1657 |
| Author | rmwc |
| Maintainers | jamesmfriedman |
| Keywords | rmwc |

## Links

- npm: https://www.npmjs.com/package/@rmwc/card
- Repository: https://github.com/rmwc/rmwc
- Homepage: https://github.com/rmwc/rmwc/tree/master/packages/card
- Issues: https://github.com/rmwc/rmwc/issues
- npm.io page: https://npm.io/package/@rmwc/card

## Dependencies (6)

- [@rmwc/base](https://npm.io/package/@rmwc/base.md) 14.3.5
- [@rmwc/types](https://npm.io/package/@rmwc/types.md) 14.3.5
- [@rmwc/button](https://npm.io/package/@rmwc/button.md) 14.3.5
- [@rmwc/ripple](https://npm.io/package/@rmwc/ripple.md) 14.3.5
- [@material/card](https://npm.io/package/@material/card.md) ^14.0.0
- [@rmwc/icon-button](https://npm.io/package/@rmwc/icon-button.md) 14.3.5

## Recent versions

- 14.3.5 (latest) — 2024-10-24
- 14.0.2-alpha.7 (next) — 2023-10-30
- 14.3.4 — 2024-09-25
- 14.3.3 — 2024-08-30
- 14.3.2 — 2024-08-19
- 14.3.1 — 2024-07-19
- 14.3.0 — 2024-07-18
- 14.2.9 — 2024-07-03
- 14.2.8 — 2024-07-01
- 14.2.7 — 2024-06-30
- 14.2.6 — 2024-06-28
- 14.2.5 — 2024-06-26
- 14.2.2 — 2024-04-24
- 14.2.1 — 2024-04-17
- 14.2.0 — 2024-04-17
- … 162 more at https://npm.io/package/@rmwc/card/versions

## README

# 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/](https://material.io/develop/web/components/cards/)

## Fully Featured Example

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

## Article Preview Example

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

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

## Card
A Card Component

### Props

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


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


## CardActionButton
A card action Button

### Props

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

---
_Source: https://npm.io/package/@rmwc/card · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._