{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55309496ad2b5d5aa4ceb11349faef79a38855a7","tarball":"https://registry.npmjs.org/@material/card/-/card-3.0.0-alpha.0.tgz","fileCount":10,"integrity":"sha512-JWzlkxYK0hElMfQ2/hDXfHNm+Rwo160y2YM+7jQiqYZ0RH3ePO3zsPu3+JZfF33+0jAhMfcSznAsKvj+pbO2aQ==","signatures":[{"sig":"MEYCIQC54BUY7tyT5ygPIAcM2GLO5dsanx0sBQRLL54LFEPVngIhAPpmYBFRzVtjz3rQlCnh2yU7Co0b77R6OdL5/YENSavZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":142915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHpeCRA9TVsSAnZWagAAExMP+QFnKtP0/MOQK7CDlUg0\ns21KDNjMXHCwFtiK+SqxYCxg1Sz6nu7jzZaQtLmV7vS5fmNy73anCBq7db0i\njtm7ieUmlURfnydowNqg0SYY/efVY6cKW4FeH0UPXtPRhCB+JYDzb2daBiZL\n0UJnOcvFgxLpHHd/g7vihNPAcYgzcEFpFbe+us3U5YChKvHGmQJrJo+eAOK6\ni15tKBasQbxgZwIwkSZkXQ9JOBWiFs1ZavHfwWISfmVo4aHy5UAnJoyA+GLy\nYcBRY38RHfvUHjmnT1yo+qR8c6Yo5yWTmcafhoFqFL6+HQvIDMX9YDxPogkH\npZMr18CKxvd6YXZlOjChBIwq1TyNPb6Z1qRJH15BUex29vmI3x/BKIOsAeDS\nvOjWwKqpp9BjS8mcJLS6pp4IcLyTv35aetFPCxryWwyD9YFgawcy0x4ME2n0\nevIdEbm27CGN7BoMcJtEAZ2c/brC30lO3UjXcM7fg88nvtGNugSYLKoq/baw\nDf1dJzo7iFjhaRngHHdlOQqDi+D30EtW3pANCxYcHZmCRJFV2xl3HEjEKWoS\nL6rSlYnkBgh6lKApm9xG32oEuQmJQuyEC8EAAkXVnb7lzsGc1O8pDlHiOgIi\nbZBKMssG3vBbHFZuhSoSGIrJqMT4bv4Vdy9E8yjSRzb2Gdot6XDAte1SUsyi\nwHdg\r\n=cntZ\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","gitHead":"094e507fcfb488303e5adec97f7f985b30e8567e","license":"MIT","_npmUser":{"name":"abhiomkar","email":"abhiomkar@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":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","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":"11.9.0","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^3.0.0-alpha.0","@material/theme":"^3.0.0-alpha.0","@material/ripple":"^3.0.0-alpha.0","@material/elevation":"^3.0.0-alpha.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_3.0.0-alpha.0_1560312414198_0.04766141141174085","host":"s3://npm-registry-packages"},"_id":"@material/card@3.0.0-alpha.0","version":"3.0.0-alpha.0"}