{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"012705d2a97a6c938c71674885a681735c439881","tarball":"https://registry.npmjs.org/@material/card/-/card-3.0.0-alpha.1.tgz","fileCount":10,"integrity":"sha512-NFtS77b6Z9gICoaFo1wrbtxrfmn0bZcTTFANQix0uWI50Hl6Ipyf798+RouW1rCE7IBIdNYDhRsM3kG7XwNx9Q==","signatures":[{"sig":"MEUCIBQ3dqmGRkMiG61k6rodd4eUWH72S8cz00wv7gDQNV0RAiEA3R4z6pOwEddO3tmKRQNgSyoz0rGDdUaSEa5ng0/eudY=","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\nwsFcBAEBCAAQBQJdAUw2CRA9TVsSAnZWagAARP8QAICITE+QH1X2yUecjDYf\n+27C92WCPFMksYRUWPV0Szc0P5T6M9Y+Vb9KwMchCaZZLcNVSlkr+nwdmrz0\nnuqHwkyTNGqDMBpikJrrApx3iklJSSNeBCVjuJCU1f78Og4b+8Y21q1NDRdW\nMikbcIilrZVxwfvNNh1noIvZzP1MyGlBa9Fx6sE2xh+7I5w9EPtXiGsgxjg3\nMAD6Zg3nRlc7AIfpIBkZtNgRpR+R0G3x9PGGrWF1ZG8XxIdLzTegi46KXr7Z\n0U45rRzjHLvcD3KA7rvgUJNITjF9g+PhQ28M34AORgIqR8hyyRq6L1Ixl0yi\nYuz8YWonxG1vIb/3ptb6dGRMa5OJlVUi2E7Wu65yvtu+F2MFH7OjVT1C6Iar\nUDFgFduO/sqcYpDsdyXy+27Uylr1TDC63m04iA2GEIFIhhBLkAL4cRkCuMCY\nUulFznXBcn+0TWA+NiL5nmDdZKehZ1dQLfe9D1GEhX5skunUimXyl7HGmuVo\n08Tbn6Nvx6IMQx2qLWmT0/Xlt4m1ah5gvuGiBDEzI2UfmFU5rgr0kP2qdlWe\nwfl4cxYh5fbK/iOHCVCDqzoAkMpwFL23IrT4VV6iY+dMtl3MviGOQ8Psqgz0\n/nig0EtZk7Z0B5+Lsurd5XO2TR8RsGLDtbKxyobHWzfecApN7f8NCezxMBpM\nMOuR\r\n=mwnv\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":"dae97b98c21bb93075a9688cf1f9076a4fe5a85d","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.1","@material/theme":"^3.0.0-alpha.1","@material/ripple":"^3.0.0-alpha.1","@material/elevation":"^3.0.0-alpha.1","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_3.0.0-alpha.1_1560366133646_0.8747440012409402","host":"s3://npm-registry-packages"},"_id":"@material/card@3.0.0-alpha.1","version":"3.0.0-alpha.1"}