{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be29fd4c3c3537676c3d32255efa187b77f08c06","tarball":"https://registry.npmjs.org/@material/card/-/card-0.35.0.tgz","fileCount":7,"integrity":"sha512-WaSrVXtFhrbOe63uH3qfPVd84hAYpTltSgAYp7s+7kW9P2bbakeZuiMbXPgPYhBzHVBDRn2cnxFidmGlDMNvEA==","signatures":[{"sig":"MEUCIFuDZt1QUw0ogxKfUfgEM86VcccNjCO9qjaPBN/85wNeAiEA6+2eUGrr/gaygdVRQdHB4MqlJ1zwWW0hZXgzs5hpE8g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27038,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mDGCRA9TVsSAnZWagAAEBEP/ieAvv8XIMDUFGSUo4Wv\n9BqyzDvHmy02uL+xq48ZvuovozarkBtscQkF4FT557nGUN8NroNDxMqmNUBW\ncNpU0kQJNHWnNbcvB/xSOIOhEvvvs5v8zi6JzNjEZupcmQg/Tixji70riqqX\nqWpxtqIKBYjTcs2RNdMzthQ3yIDZplwIloBp5H/lNthoO938do6gf2G0yF0o\nY4Rk69CVGBAQZjdjZK3GWHs2sW22lkyTGQaM2p8E07+hEQW3bJVcZW6yoTDA\nWC33KmG2TDryXG5a+idxGEg6W8b9lDLyPbgNI2+fUetDNM+LsfM5AfM49NFA\nBahMyYP5eghCXhF5NFNZh27pFt3ZqsZShBdT6tC32dNY7BEKgPohV/kbVR+y\nMZRLp2mz39OI7yv0cN9M+Mg+3zkJPmejPXrBSeXbqbJUw9uzpBIzcfgKBx64\nWLPsQbmdmXgNTy76qLD3VwVk56Qt2nbbznLbIiOajdHOCjQtodb5C5fZN1te\ns1m2uMSc3gOT3hbaK1BlQQToaxRPpE1dx0Qy7iMYVV/R2ajy5EPEQ/nFQbwL\nfxWApeKn5qpG8nP0gH0Pl/NxHXzo1Kl6995/S/HPCJvV7FkGAIjhd6tUC81y\nwLqv+8duL3zaxDTe+30En8Ua3AGrzsnFn20p3kv3BDTlh1wPE6MOctg2BBIr\n2kr+\r\n=sr91\r\n-----END PGP SIGNATURE-----\r\n"},"name":"@material/card","readme":"\n\n# Cards\n\n\n\nMDC Card is a component that implements the\n[Material Design card component](https://material.io/guidelines/components/cards.html), and makes it available to\ndevelopers as a set of CSS classes.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n
\n Simple\n
\n```\n\nFully-featured:\n\n```html\n
\n
\n
Title
\n
\n \n
\n
\n \n \n
\n
\n share\n more_vert\n
\n
\n
\n```\n\nCards don't come with a predefined width, height, padding, or margin. In its simplest form (just a single element with\n`mdc-card`), a card is basically just `mdc-elevation` + `border-radius`.\n\nCards expand horizontally to fill all available space, and vertically to fit their contents.\n\nIf you'd like to maintain a consistent width and height across cards, you'll need to set it in your styles:\n\n```css\n.my-card {\n height: 350px;\n width: 350px;\n}\n```\n\n#### Content blocks\n\nCards are composed of different content blocks, which are typically laid out vertically.\n\nBecause every app is different, there are no \"standard\" layouts for card content; each app should define their own.\n\nHowever, MDC Card _does_ provide styles for two common card elements: _rich media_ (images or video) and _actions_.\n\n##### Rich media\n\n```css\n.my-card__media {\n background-image: url(\"pretty.jpg\");\n}\n```\n\n```html\n
\n
Title
\n
\n```\n\nThis area is used for showing rich media in cards, and optionally as a container. Use the `mdc-card__media` CSS class\nand the [optional modifier classes](#css-classes).\n\n##### Actions\n\n```html\n
\n \n \n
\n```\n\nThis area is used for showing different actions the user can take. It's typically used with buttons, as in the example\nabove, or with icon buttons, as below:\n\n```html\n
\n \n favorite_border\n \n share\n more_vert\n
\n```\n\nBe sure to include the `mdc-card__action` class on every action for correct positioning. In addition, _button_ icons\nshould use the `mdc-card__action--button` class, and _icon_ actions should use the `mdc-card__action--icon` class.\n\nTo have a single action button take up the entire width of the action row, use the `--full-bleed` modifier on the row:\n\n```html\n
\n```\n\nTo display buttons _and_ icons in the same row, wrap them in `mdc-card__action-buttons` and `mdc-card__action-icons`\nelements:\n\n```html\n
\n
\n \n \n
\n
\n share\n more_vert\n
\n
\n```\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-card` | Mandatory, for the card element\n`mdc-card--outlined` | Removes the shadow and displays a hairline outline instead\n`mdc-card__primary-action` | The main tappable area of the card. Typically contains most (or all) card content _except_ `mdc-card__actions`. Only applicable to cards that have a primary action that the main surface should trigger.\n`mdc-card__media` | Media area that displays a custom `background-image` with `background-size: cover`\n`mdc-card__media--square` | Automatically scales the media area's height to equal its width\n`mdc-card__media--16-9` | Automatically scales the media area's height according to its width, maintaining a 16:9 aspect ratio\n`mdc-card__media-content` | An absolutely-positioned box the same size as the media area, for displaying a title or icon on top of the `background-image`\n`mdc-card__actions` | Row containing action buttons and/or icons\n`mdc-card__actions--full-bleed` | 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\n`mdc-card__action-buttons` | A group of action buttons, displayed on the left side of the card (in LTR), adjacent to `mdc-card__action-icons`\n`mdc-card__action-icons` | A group of supplemental action icons, displayed on the right side of the card (in LTR), adjacent to `__action-buttons`\n`mdc-card__action` | An individual action button or icon\n`mdc-card__action--button` | An action button with text\n`mdc-card__action--icon` | An action icon with no text\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-card-fill-color($color)` | Sets the fill color of a card\n`mdc-card-outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow)\n`mdc-card-corner-radius($radius)` | Sets the corner radius of a card\n`mdc-card-media-aspect-ratio($x, $y)` | Maintains the given aspect ratio on a `mdc-card__media` subelement by dynamically scaling its height relative to its width\n","license":"Apache-2.0","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","card"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web card component","directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.35.0","@material/elevation":"^0.35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_0.35.0_1524523205963_0.03243347130595087","host":"s3://npm-registry-packages"},"_id":"@material/card@0.35.0","version":"0.35.0"}