{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b29ef091b54d12598ea824bac0d530470570eca4","tarball":"https://registry.npmjs.org/@material/card/-/card-1.0.0-1.tgz","fileCount":9,"integrity":"sha512-Yk79U44c1noZozi5fli3liHIrQLNP465OR3EbvACb+/Flb5fW3XKTBYqbuBp1VEiZBcKTO2i76I/TKz/YEkzZw==","signatures":[{"sig":"MEUCICf10H7nbMaKKsfVeERm8InatL/IQIf4dBMmBBl4fXUFAiEAkNzL3nDgLQGssidJpGOJ2CfcC9hAzDh1nrRO3jmAHYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbXFCRA9TVsSAnZWagAA6h8P/R+XJvHqrdv7Kqx7TMLG\nUvuBd8SnFBBlvjZoH41jwjlMl24txYgkcVCVn37Idp5QxC7TZciiQ1pdquK1\nrdOgn9G2zhw9kar67KLqWcxddrxPe3auHnKR2TbYnzLjo+VPOhXKfZQWhcLx\nacStDK/i3d6VMopiz+lqMKqHBs38n9HL8RpAn+QYZtwtwu32MxnS5G4K26bs\nTZZZ9vOp6nh2VquUOZnU9YljKupqiWrHtuX87qKKCyZx3sabWLBhaNUy1pHS\nGZcNfbh07CJr9HzONRH2+Ex17boHeFRSk9AwzKWAH49+uZUWOXP9s1++mgj+\nskLPe+k+UKwBv3loJNPljdhyFnT2o96ECNkUdt83k0wSgAeOsjBBEmfhztl9\njoyokWDsNM7O/QGVffvKgoz8m6E3JIKvVkT81A1hPv6g768O3bOMq40qW2S7\n9iIT4XMhFV09MLWIrAOkVv5UnppXIG8uffAlVwskn49fOXP1oKHLzCYe8CB1\nflOCTEGzdQeFhBmGWgwPc6OQaeT8mpObP15dlb7kzKTr2kAVzohnagOGfQ43\nwtu9JO0oSUchcGK3FxBb4Cf2NrooAtV5sSnAWnBEXF2Lvim4xYThBXpoYsBP\n5dUnb9eGbyzabTNx3ufOa65Tn6HQdbUQAk1JOEjH5aHGcC95VFshuGqChTui\njXsV\r\n=0PRc\r\n-----END PGP SIGNATURE-----\r\n"},"name":"@material/card","readme":"\n\n# Cards\n\n\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n \n
\n```\n\n> _NOTE_: MDC Card is designed to accommodate a wide variety of use cases.\n> See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.\n\n### Styles\n\n```css\n@import \"@material/card/mdc-card\";\n```\n\nIn order to remain general-purpose and support e.g. images spanning the full width of the card, MDC Card does not\ninclude padding styles on the root element. When adding free-form text content to cards, padding should be set to\n`16px`:\n\n```css\n.my-card-content {\n padding: 16px;\n}\n```\n\n> _NOTE_: MDC Card's predefined classes for content areas (e.g. `mdc-card__actions`) take care of their own padding.\n\nBy default, cards expand horizontally to fill all available space, and vertically to fit their contents.\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\nYou can also place cards within layout containers, such as [MDC Layout Grid](../mdc-layout-grid)\nor CSS Flexbox or Grid.\n\n### JavaScript\n\nMDC Card itself does not require JavaScript. However, if you place interactive components inside your cards,\nyou may want to instantiate ripples or other components. For example:\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst selector = '.mdc-button, .mdc-icon-button, .mdc-card__primary-action';\nconst ripples = [].map.call(document.querySelectorAll(selector), function(el) {\n return new MDCRipple(el);\n});\n```\n\n> _NOTE_: If your card includes any [icon button toggles](../mdc-icon-button#icon-button-toggle), you will want to\n> instantiate `MDCIconButtonToggle` instead of `MDCRipple`.\n\n## Variants\n\n### Outlined Card\n\nBy default, cards are elevated with no outline. You can render unelevated outlined cards instead by adding the\n`mdc-card--outlined` modifier class.\n\n```html\n
\n \n
\n```\n\n### Card Contents\n\nMDC Card can be used for a wide variety of use cases, but it includes styles for a few common ones.\n\n#### Primary Action\n\nIf a majority of the card (or even the entire card) should be actionable, you can add the `mdc-card__primary-action`\nclass to the region to give it MDC Ripple styles. You should also assign `tabindex=\"0\"` to ensure it can also be\ninteracted with via keyboard.\n\n```html\n
\n
\n \n
\n \n
\n```\n\n> _NOTE_: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\n> effect of multiple nested elements with ripple and states applied at once.\n\n#### Rich media\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```html\n
\n
Title
\n
\n```\n\n```css\n.my-card__media {\n background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used for showing different actions the user can take, typically at the bottom of a card.\nIt's often used with [buttons](../mdc-button):\n\n```html\n
\n \n \n
\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n
\n \n \n \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 All Business Headlines\n arrow_forward\n \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 \n \n
\n
\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n#### Combined Example\n\nThe following is an example incorporating all of the above elements:\n\n```html\n
\n
\n
\n
Title
\n
\n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-card` | Mandatory. The main card element.\n`mdc-card--outlined` | Optional. Removes the shadow and displays a hairline outline instead.\n`mdc-card__primary-action` | Optional. 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` | Optional. Media area that displays a custom `background-image` with `background-size: cover`.\n`mdc-card__media--square` | Optional. Automatically scales the media area's height to equal its width.\n`mdc-card__media--16-9` | Optional. Automatically scales the media area's height according to its width, maintaining a 16:9 aspect ratio.\n`mdc-card__media-content` | Optional. 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` | Optional. Row containing action buttons and/or icons.\n`mdc-card__actions--full-bleed` | Optional. 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` | Optional. 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` | Optional. A group of supplemental action icons, displayed on the right side of the card (in LTR), adjacent to `__action-buttons`.\n`mdc-card__action` | Optional. An individual action button or icon.\n`mdc-card__action--button` | Optional. An action button with text.\n`mdc-card__action--icon` | Optional. An action icon with no text. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\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-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to card with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\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":"MIT","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.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":"6.7.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":"bicknellr","email":"bicknellr@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":"10.9.0","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^1.0.0-1","@material/theme":"^1.0.0-1","@material/ripple":"^1.0.0-1","@material/elevation":"^1.0.0-1","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_1.0.0-1_1551742405121_0.9401907132550871","host":"s3://npm-registry-packages"},"_id":"@material/card@1.0.0-1","version":"1.0.0-1"}