# @rsmdc/card

> The Material Components for the web card component.

Latest version **1.1.39** (published 2020-06-18) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.39 |
| Published | 2020-06-18 |
| First published | 2018-09-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 2.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | rsmdc |
| Keywords | material components, material design, card |

## Links

- npm: https://www.npmjs.com/package/@rsmdc/card
- Repository: https://github.com/rsmdc/rsmdc
- Homepage: https://github.com/rsmdc/rsmdc#readme
- Issues: https://github.com/rsmdc/rsmdc/issues
- npm.io page: https://npm.io/package/@rsmdc/card

## Dependencies (5)

- [@rsmdc/rtl](https://npm.io/package/@rsmdc/rtl.md) ^0.42.0
- [@rsmdc/shape](https://npm.io/package/@rsmdc/shape.md) ^1.1.39
- [@rsmdc/theme](https://npm.io/package/@rsmdc/theme.md) ^1.1.39
- [@rsmdc/ripple](https://npm.io/package/@rsmdc/ripple.md) ^1.1.39
- [@rsmdc/elevation](https://npm.io/package/@rsmdc/elevation.md) ^1.1.39

## Recent versions

- 1.1.39 (latest) — 2020-06-18
- 1.1.24 — 2020-01-20
- 1.1.23 — 2020-01-20
- 1.1.20 — 2019-10-01
- 1.1.19 — 2019-10-01
- 1.1.16 — 2019-08-29
- 1.1.15 — 2019-08-05
- 1.1.14 — 2019-08-05
- 1.1.10 — 2019-08-01
- 1.1.0 — 2019-06-18
- 1.0.8 — 2019-05-27
- 1.0.7 — 2019-05-24
- 0.39.1-beta.2 — 2018-09-30
- 0.39.1-beta.1 — 2018-09-30
- 0.39.1 — 2018-09-20

## README

# Card
## example
### default card
```html
<x-card>
  <x-card-header>
    <x-card-title>title</x-card-title>
    <x-card-subtitle>subtitle</x-card-subtitle>
  </x-card-header>
  <x-card-description>
    description
  </x-card-description>
  <x-card-actions>
    <x-button />
    ...
  </x-card-actions>
</x-card>

```
```scss
x-card {
  > x-card-media {
    @include rs-card-media-type(16-9);
    @include rs-card-media-image(url('sample.png'));
  }
}
```  
### add media
```html
<x-card>
  <x-card-media />
  <x-card-header>
    <x-card-title>title</x-card-title>
    <x-card-subtitle>subtitle</x-card-subtitle>
  </x-card-header>
  <x-card-description>
    description
  </x-card-description>
  <x-card-actions>
    <x-button />
    ...
  </x-card-actions>
</x-card>

```
```scss
x-card {
  > x-card-media {
    @include rs-card-media-type(16-9);
    @include rs-card-media-image(url('sample.png'));
  }
}
```  
NOTES:  
If you use `x-card-media`, you must use these mixins:
* rs-card-media-type  
To set media size.
* rs-card-media-image  
To set media image.

### add primary contents
```html
<x-card>
  <x-card-contents>
    <x-card-header>
      <x-card-title>title</x-card-title>
      <x-card-subtitle>subtitle</x-card-subtitle>
    </x-card-header>
  </x-card-contents>
  <x-card-description>description</x-card-description>
  <x-card-actions>
    <x-button />
    ...
  </x-card-actions>
</x-card>

```
`x-card-contents` means primary contents in card, the area can tap and select.  
If you want to tap some parts of card, inclose applicable parts by `x-card-contents`.

## feature
### custom elements
* `x-card`
  * `x-card-contents`
  * `x-card-media`
  * `x-card-header`
    * `x-card-title`
    * `x-card-subtitle`
  * `x-card-description`
  * `x-card-actions`

### attributes
Nothing.
### types
* card
  * default
  * outlined
* media
  * 16-9
  * square
* actions
  * full-bleed

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